Xamarin Forms carousel with menu/tabs

I want do create something like TabbedPage but as a View with scrollable "menu" ( I will have about 8 tabs). How can I achive this? I was thinking about doing CarouselView and somehow to make a tabbed header, but I dont know how to make it good. Or maybe there is a plugin for TabbedView ( I spent few hours and I didn't find anything). Thanks in advance.

2 answers

  • answered 2018-12-05 22:36 Mouse On Mars

    Xamarin.Forms does not provide a TabView control but only a TabbedPage which seems to be no good in your case. There are commercial third party libraries that offer such a control out of the box (e.g. from SyncFusion). I looked quite a long time into this issue. Finally, I went for creating my own implementation which is based on a data bindable StackLayout with a horizontal line of buttons. Only the ContentView that is associated with the selected button is shown all other ones are hidden.

  • answered 2018-12-06 09:03 James Mallon

    James Montemagno made a a brilliant blog on how to implement this a couple of years ago.

    That sorts out the Carousel View. Now to write the tabbed header I wrote 1 of these a couple of years back. What you need to do is make a stacklayout with orientation horizontal, make the width bigger than the screen width and then every new page you visit you can translate the top bars x coordinates to the left or right. and change the image in the bar so that it looks highlighted.

    Have a real play with this, see if you can make the transitions between pages smooth and the translation look sleek. I managed to do it so Im sure you will be fine.

    I would provide code but unfortunately it was for a client and I cannot share his intellectual property.

  • nav-link change color on carousel-item transition

    I have a carousel from Bootstrap 4 which includes three images. I want to change the nav-links color to red when the third carousel image is active and remove red color when the first and second images are active. Is there anyway to do this?

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" id="c-1">
          <div class="carousel-item active">
            <img id="c-1" class="d-block w-100 si" data-color='light' src="https://mrdp2rbn.portal.ir/themes/custom-2fc4/userfiles/e02825.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            <img id="c-2" class="d-block w-100 si" src="https://mrdp2rbn.portal.ir/themes/custom-2fc4/userfiles/decaa4.jpeg" alt="Second slide">
          </div>
          <div class="carousel-item c-3">
            <img id="" class="d-block w-100 c-3 si" src="https://mrdp2rbn.portal.ir/themes/custom-2fc4/userfiles/a7a145.jpg" alt="Third slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    
  • Wrong slide shown in Carousel

    I am developing SPA in VueJS and for one of the component in my page is "Carousel" for which owl carousel is used.

    Since this website is multilingual, upon changing the language the slide fetches and shows the language on that particular slide. No issues at all. But here is a weird issue. When you drag/swipe the slider manually, it shows the other language content.

    enter image description here

    The problem I see that it mixes the content in the DOM and for the earlier selected language, the owl-item class still exists.

    I have tried destroying and re-initializing the owl-carousel but it didn't work.

    what am I missing here?

  • Xamarin (android) : TabbedBar above Page in TabbedPage

    Bug on Android No bug on iOS

    I have a TabbedPage, it works well on iOS but on Android, pages are above the bottomTabbedBar. Why ? I use Xamarin Forms 4.0.

    <?xml version="1.0" encoding="UTF-8"?>
    <GXF:ExtendedTabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                            x:Class="GA.GATabbedPage"
                            xmlns:GXF="clr-namespace:GA.App.Xamarin.Forms;assembly=GA.App.Xamarin.Forms" 
                            xmlns:GA="clr-namespace:GA;assembly=GA.Standard" 
                            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" 
                            android:TabbedPage.ToolbarPlacement="Bottom"
                            android:TabbedPage.BarItemColor="Gray"
                            android:TabbedPage.BarSelectedItemColor="{DynamicResource GAV3Blue}">
    
    </GXF:ExtendedTabbedPage>
    

    On View side I have a BindableProperty to fill the view :

    public static readonly BindableProperty PagesToShowProperty = BindableProperty.Create(
                nameof(PagesToShow),
                typeof(List<Page>),
                typeof(GATabbedPage),
                null,
                propertyChanged: OnPagesToShowChanged);
    
            public List<Page> PagesToShow
            {
                get { return (List<Page>)GetValue(PagesToShowProperty); }
                set { SetValue(PagesToShowProperty, value); }
            }
    
            protected static void OnPagesToShowChanged(BindableObject bindable, object oldValue, object newValue)
            {
                if (bindable is GATabbedPage control)
                {
                    control.Children.Clear();
                    List<Page> pages = newValue as List<Page>;
                    if (pages != null)
                    {
                        pages.ForEach((obj) => control.Children.Add(new ExtendedNavigationPage(obj)));
                        control.CurrentPage = control.Children[0];
                    }
                }
            }
    
    

    On Controller side, I fill like this :

            List<Page> _pagesToShow = new List<Page>();
            public List<Page> PagesToShow => _pagesToShow;
            private void Init()
            {
                AddPage(TypeManager.Get<DashboardPageController>(), TypeManager.Get<DashboardPage>(), "home.png", "Dashboard");
                AddPage(TypeManager.Get<BookPageController>(), TypeManager.Get<BookPage>(), "notebook.png", "book");
                AddPage(TypeManager.Get<TripPreparationPageController>(), TypeManager.Get<TripPreparationPage>(), "location.png", "my location");
                AddPage(TypeManager.Get<MeasureScanPageController>(), TypeManager.Get<MeasureScanPage>(), "Alcotest.png", "Ethylotest".TranslateFromFrToCurrentLocale());
    
                OnPropertyChanged(nameof(PagesToShow));
            }
    
            void AddPage(Type pageControllerType, Type pageType, string icon, string title)
            {
                var controller = pageControllerType?.CreateInstance<BaseController>(pageType);
                var page = controller?.Page;
                if (page != null)
                {
                    page.IconImageSource = icon;
                    page.Title = title;
    
                    _pagesToShow.Add(page);
                }
            }
    

    It is like the Pages are in full screen mode, no matter if there is a TabbedBar or not.

  • Xamarin Forms : TabbedPage icons are changing when pushAsync

    I'm using Xamarin Forms 4.0.x for my app. I have created a TabbedPage with 4 Tabs and a NavigationPage inside each of them.

    I use Navigation.PusAsync to go to the next Page, like on this link : https://docs.microsoft.com/fr-fr/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page

    The problem is that the icons and texts of my TabBar are changing when the new Page is displayed. The icon becomes the NavigationBar topLeft icon and the text becomes the NavigationBar middle title... why ?

  • TabbedPage Toolbar only shows the active ToolbarItem when ToolbarPlacement is bottom and ContentPage count bigger than 4

    There is a feature in Xamarin.Forms 3.1 version which we already support for Android toolbar to be placed in the bottom. But when the content page within the Tabbed Page is bigger than 4, then the Toolbar will no show all the tabs there, only the current active tab will be showed. the other ones can be only switched and then the tab will be selected accordingly. this is my code, There should be four tabs in the toolbar :

    <?xml version="1.0" encoding="utf-8" ?>
    <TabbedPage
    x:Class="MelkRadar.App.MobileApp.Views.TabbedView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    xmlns:view="clr-namespace:MelkRadar.App.MobileApp.Views"
    android:TabbedPage.ToolbarPlacement="Bottom"
    BarTextColor="Red">
    
    <view:CustomerExplorerView Title="مشتریان" />
    <view:RealtorSettingView Title="تنظیمات" />
    <view:FavoriteAdvertsExplorerView Title="زونکن" />
    <view:AdvertsExplorerView Title="اگهی ها" />
    
    </TabbedPage>
    

    see this pictures please:

    https://cdn1.imggmi.com/uploads/2019/6/11/6659fa76fc68ae58deb17d6dfd74f089-full.jpg https://cdn1.imggmi.com/uploads/2019/6/11/150fe2463357f9008da3bed6d976d1bd-full.jpg

    I need to show all page titles. what should I do for this problem?