Forum Xamarin Xamarin.Forms

is there a Tabbed view in Xamarin.forms?

HistoryaHistorya USMember ✭✭✭

Hello,
any idea how to make a Tabbed view in xamarin.forms,
i only found Tabbed page which is not possible to put it inside a content page!

choosing Xamarin.forms is bad choice? should i've used each platforme beside with xamarin.android and xamarin.ios!

Thanks in advance

«1

Answers

  • JoeMankeJoeManke USMember ✭✭✭✭✭
    edited May 2017

    There is no tab view built into Xamarin.Forms. What I've done in my own project is create a custom view that renders to a TabLayout in Android, a UISegmentedControl in iOS, and a Pivot in UWP.

  • JulienRosenJulienRosen CAMember ✭✭✭✭

    why are you trying to put a TabbedPage inside a ContentPage?

    the TabbedPage is the content page in your example

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    @JulienRosen The obvious use case for a tab view is right there in his screenshot, when you want some kind of shared header above the tabs. That is not possible with a TabbedPage because the tabs are rendered at the very top (Android, UWP) or bottom (iOS) of the page, and each child is a separate page.

    Furthermore, there are cases where you do not need an entirely new page for each tab. In the example screenshot, I can imagine an implementation which simply changes the ItemsSource of a ListView depending on which tab is currently selected.

  • JulienRosenJulienRosen CAMember ✭✭✭✭
    edited May 2017

    The XF TabbedPage respects the native implementations on each platform, aka iOS tabs on the bottom with images, android tabs at the top text only.

    It was not obvious by the screenshot that you want a shared header on each page.

    Essentially, are the three tabs you are asking for not just buttons? Buttons that have a custom style with an underline bar to show selection. They could even just be labels with gesture recognizers attached. This allows you to create one content page with the 3 buttons always on the bottom, with custom methods that can toggle your listview source, and a single header image.

  • HistoryaHistorya USMember ✭✭✭

    @JoeManke @JulienRosen

    this is the expected view(jpg):

    and this is my trial, (the calender with syncfusion):

  • KyleWarrenKyleWarren USUniversity ✭✭
    You could use a carousel view and manage the transitions and highlight states based on taps of my event, current event, and past events
  • HistoryaHistorya USMember ✭✭✭

    @KyleWarren carousel view in xamarin.forms??

  • KyleWarrenKyleWarren USUniversity ✭✭
    Yes it's in beta/pre release now and pinned at the top of the forms forums. There's also this control that works well for me https://github.com/alexrainman/CarouselView
  • MatthewSnyderMatthewSnyder USMember ✭✭
    edited June 2017

    Telerik has a tab view if you don't want to build it yourself:
    http://www.telerik.com/xamarin-ui/tabview

    And no, I don't work for Telerik. :)

  • batmacibatmaci DEMember ✭✭✭✭✭
    How about segmentedbuttons from fresh essentials?
  • DevabakthiniDevabakthini INMember ✭✭
    edited October 2017

    How can I Implement this in xamarin forms (Tab Pages With Header)

    Please suggiest me!
    Thanks in advance.

  • batmacibatmaci DEMember ✭✭✭✭✭

    @MatthewSnyder said:
    Telerik has a tab view if you don't want to build it yourself:
    http://www.telerik.com/xamarin-ui/tabview

    And no, I don't work for Telerik. :)

    It looks like they are inheriting things from carouselview

  • batmacibatmaci DEMember ✭✭✭✭✭

    Most of the android apps have tabbedview. how come xamarin still doesnt have tabbed view. is it not needed or hard to implement?

  • BjornBBjornB USMember ✭✭✭
    edited December 2017

    ..

  • BjornBBjornB USMember ✭✭✭

    @Devabakthini said:

    How can I Implement this in xamarin forms (Tab Pages With Header)

    Please suggiest me!
    Thanks in advance.

    https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/tabbed-page/

    top tabs for ios : https://github.com/NAXAM/toptabbedpage-xamarin-forms

  • batmacibatmaci DEMember ✭✭✭✭✭

    @BjornB TabbedPage can be used as mainpage only if I am not mistaken. what is required here is a navigation page which is tabbedpage.

    So my mainpage is simple contentpage or navigationpage, I want to navigate from mainpage to a tabbedpage which cant be achieved with xamarin forms tabbed page. Do I understand correct? only option available seems to be telerik tabbedview for now.

  • BjornBBjornB USMember ✭✭✭

    @batmaci
    you can navigate to tabbedpages.
    tabbedpage is not restricted to be set as mainpage only

  • BjornBBjornB USMember ✭✭✭
    edited December 2017

    If you want top tabs on both android and ios, and content above tabs just like the first post in this thread, that can easily be done with very simple XAML to simulate tabs.

    3 labels horizontaly with a boxview below each label.
    the boxview is only visible under the label(tab) that is active
    add taprecognizers to label and/or boxview to change active tab when tapped on.
    the content below tabs changes visibility based on what tab is active

  • chaosifierchaosifier Member ✭✭

    I've created a plugin for it. Please have a look.
    www.nuget.org/packages/Xam.Plugin.TabView

  • rfzh1996rfzh1996 USMember ✭✭

    @BjornB said:
    ´´´
    <ContentPage.Content>

            <StackLayout>
                
                <!--HeaderContent-->
                
            </StackLayout>
          
    
            <Grid BackgroundColor="#FAFAFA" Padding="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
    
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"></RowDefinition>
                </Grid.RowDefinitions>
    
                <Label Text="Tab1" Grid.Column="0"  TextColor="{Binding Tab1Visible, Converter={StaticResource focus}}" VerticalOptions="Center" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" FontAttributes="Bold"></Label>
    
                <Label Text="Tab2" Grid.Column="1"  TextColor="{Binding Tab2Visible, Converter={StaticResource focus}}" VerticalOptions="Center" HorizontalTextAlignment="Center"  HorizontalOptions="CenterAndExpand" FontAttributes="Bold"></Label>
    
                <Label Text="Tab3" Grid.Column="2"   TextColor="{Binding Tab3Visible, Converter={StaticResource focus}}" VerticalOptions="Center" HorizontalTextAlignment="Center"  HorizontalOptions="CenterAndExpand" FontAttributes="Bold"></Label>
    
                <BoxView BackgroundColor="#80FF0000" IsVisible="{Binding Tab1Visible}" HeightRequest="3" Grid.Column="0" VerticalOptions="End" ></BoxView>
                <BoxView BackgroundColor="#80FF0000"  IsVisible="{Binding Tab2Visible}" HeightRequest="3" Grid.Column="1" VerticalOptions="End" ></BoxView>
                <BoxView BackgroundColor="#80FF0000"  IsVisible="{Binding Tab3Visible}"  HeightRequest="3" Grid.Column="2" VerticalOptions="End" ></BoxView>
    
                <ContentView BackgroundColor="Transparent" Grid.Column="0">
                    <ContentView.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding TabTappedCommand}" CommandParameter="1"></TapGestureRecognizer>
                    </ContentView.GestureRecognizers>
                </ContentView>
    
                <ContentView BackgroundColor="Transparent" Grid.Column="1">
                    <ContentView.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding TabTappedCommand}" CommandParameter="2"></TapGestureRecognizer>
                    </ContentView.GestureRecognizers>
                </ContentView>
    
                <ContentView BackgroundColor="Transparent" Grid.Column="2">
                    <ContentView.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding TabTappedCommand}" CommandParameter="3"></TapGestureRecognizer>
                    </ContentView.GestureRecognizers>
                </ContentView>
            </Grid>
    
        
    
            <StackLayout IsVisible="{Binding Tab1Visible}">
                <!--Content-->
            </StackLayout>
    
            <StackLayout IsVisible="{Binding Tab2Visible}">
                <!--Content-->
            </StackLayout>
    
            <StackLayout IsVisible="{Binding Tab3Visible}">
                <!--Content-->
            </StackLayout>
    
        </StackLayout>
    </ContentPage.Content>
    

    ´´´

    The viewmodel logic should be easy to figure out on your own ;)

    The staicResource called "focus" return a semitransparent textcolor if the tab is not selected. and a non transparent color if it is selected.

    if you change the content below tabs to a carouselview, it becoms slideable, and you would change tabs selected based on the index of your carouselview

    @batmaci
    @RefkaBenmahmoud

    Hi can u post the example ModelView? i using Prism can i use this??

  • BjornBBjornB USMember ✭✭✭

    @rfzh1996

    3 public bool,
    1 public Command that takes an integer as a parameter,

    The command changes the bools true/false depending on the parameter.

    Yes prism will do just fine

  • rfzh1996rfzh1996 USMember ✭✭

    @BjornB said:
    @rfzh1996

    3 public bool,
    1 public Command that takes an integer as a parameter,

    The command changes the bools true/false depending on the parameter.

    Yes prism will do just fine

    I cant do work :( you have any guide or code example?

  • ivanxamarinivanxamarin Member ✭✭

    When I started studying Xamarin Forms I stumbled upon this problem here and finally got some time to explore this. There is the way to achieve this and this is one possibility.

    You will want to use any kind CarouselView there is available at NuGet because you'll want to avoid coding swipe gestures and all the animation that comes with carouselview. There are:
    1. Xamarin Forms CarouselView - still just in prerelease and although can be useful, there is no reason to use it since xamarin is going to include number 3 in Forms.Core in some of the next releases.
    2. CardsView - This one is fine and can be used
    3. CarouselView FormsPlugin - Xamarin is going to include this one in Forms.Core so it's probably best to use this one and hope it's going to be real thing when published.

    Now, the best approach would be to use this option:

    But also, ItemsSource supports a List of Views, giving you the option to declare the Carousel entirely in XAML:

    as explained in CarouselView github page

    but there are some known bugs which are not going to be fixed until the control is included in core. So it's probably going to be possible to use it that way, but not for now.

    This is the xaml code I used:

    `
    <ContentPage.BindingContext>

    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:BaseViewModel x:Key="MyViewModel"/>
            <DataTemplate x:Key="tab1">
                <Label Text="This is tab 1" />
            </DataTemplate>
            <DataTemplate x:Key="tab2">
                <Label Text="This is tab 2" />
            </DataTemplate>
            <DataTemplate x:Key="tab3">
                <Label Text="This is tab 3" />
            </DataTemplate>
            <sub:TabTemplateSelector x:Key="tabTemplateSelector"
                     Tab1="{StaticResource tab1}"
                     Tab2="{StaticResource tab2}"
                     Tab3="{StaticResource tab3}">
            </sub:TabTemplateSelector>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Spacing="0" >
            <Grid RowSpacing="0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="4" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <ContentView Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Padding="10, 10, 10, 10" >
                    <Image Source="pi.png" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"  Aspect="AspectFill">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding OptionTapped}" CommandParameter="1" />
                        </Image.GestureRecognizers>
                    </Image>
                </ContentView>
                <ContentView Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Padding="10, 10, 10, 10" >
                    <Image Source="pi.png" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Aspect="AspectFill">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding OptionTapped}" CommandParameter="2" />
                        </Image.GestureRecognizers>
                    </Image>
                </ContentView>
                <ContentView Grid.Row="0" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Padding="10, 10, 10, 10" >
                    <Image Source="pi.png" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Aspect="AspectFill">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding OptionTapped}" CommandParameter="3" />
                        </Image.GestureRecognizers>
                    </Image>
                </ContentView>
                <ContentView BackgroundColor="White" Grid.Row="1" Grid.Column="0" IsVisible="{Binding Tab1Visible}">
                </ContentView>
                <ContentView BackgroundColor="White" Grid.Row="1" Grid.Column="1" IsVisible="{Binding Tab2Visible}">
                </ContentView>
                <ContentView BackgroundColor="White" Grid.Row="1" Grid.Column="2" IsVisible="{Binding Tab3Visible}">
                </ContentView>
            </Grid>
            <controls:CarouselViewControl
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                BackgroundColor="#F0F000"
                ItemsSource="{Binding Tabs}"
                ItemTemplate="{StaticResource tabTemplateSelector}"
                Position="{Binding TabVisible}"
                />
        </StackLayout>
    </ContentPage.Content>
    

    `

    You'll have to add TemplateSelector something like this:

    `
    public class TabTemplateSelector : DataTemplateSelector

    {
        public DataTemplate Tab1 { get; set; }
        public DataTemplate Tab2 { get; set; }
        public DataTemplate Tab3 { get; set; }
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            try
            {
                switch ((int)item)
                {
                    case 1: return Tab2;
                    case 2: return Tab3;
                    case 0: return Tab1;
                    default: return Tab1;
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    }`
    

    I coded this too quick just to make it work so everyone is welcome to suggest something and I hope this will help others looking for a solution.

  • djgtramdjgtram HUMember ✭✭

    @JoeManke said:
    There is no tab view built into Xamarin.Forms. What I've done in my own project is create a custom view that renders to a TabLayout in Android, a UISegmentedControl in iOS, and a Pivot in UWP.

    Is there any chance of putting up the source code somewhere?

  • aquabayaquabay AUMember ✭✭

    @BjornB said:

    @rfzh1996 said:

    @BjornB said:
    @rfzh1996

    3 public bool,
    1 public Command that takes an integer as a parameter,

    The command changes the bools true/false depending on the parameter.

    Yes prism will do just fine

    I cant do work :( you have any guide or code example?

    If you cant make that work you should probably start by improving your skills as a developer instead of looking for code to copy.

    My advice would be to remove PRISM and learn/understand what prism actually does before installing it again

    PS: Xaml is not code ;)

  • RasmusChristensenRasmusChristensen DKUniversity ✭✭

    @BjornB Really great and simple solution to the problem. I'm currently looking for exactly a solution to this problem. And while xamarin is working on their latest carouselView, this will be my solution in the MVP edition. Simple to implement, simple to replace later on. Thanks!

  • kingmatherskingmathers Member ✭✭

    I am currently having the same problem. I want to display ListViews in tabs within a ContentView. Those ListViews use an ItemTemplate (a Static Resource defined in the same xaml file) and Data Binding (ItemsSource).

    If I just put those ListViews within a StackLayout, it works fine but the UI is not what I desired. The Syncfusion TabView does not work with Binding for me and the CarouselViewControl does not work with binding nor with the Static Resources.

    I would like to set the Items of the TabView directly in XAML (not binding), since the number is fixed and I already use Binding in the ListView itself.

    Any ideas?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Carousel effect can be achieved with https://github.com/AndreiMisiukevich/CardView

  • ivanxamarinivanxamarin Member ✭✭

    @kingmathers

    If I understood well that's what I was trying to achieve and did it eventually with the code I posted in this thread.
    There was a minor bug that has a good workaround now: https://github.com/alexrainman/CarouselView/issues/408. That's actually a control that can be used.

  • DR_nathouDR_nathou BEMember ✭✭

    I would write that myself -> If you need some inspiration Venky has done it: xamarinforms-mvvm-custom-tabbedpage

    Your imagination is the limit :-)

  • Yes. Please refer this. It is working fine for me.
    https://github.com/rajeshangappan/Xamarin/tree/master/Xam.TabView

  • www.nuget.org/packages/Xam.Plugin.TabView by chaosifier works very well for me ...

    ... now Mr. Chaosifier

    could you please do a vertical tabbed-page layout as well as the horizontal tabbed-page layout as well?

    Thanks

  • 5Hur1K5Hur1K Member
    edited February 25

    you can try this one, it is fully customizable
    github_com/Alex-Dobrynin/Xamarin.Controls.TabView
    replace _ by .

  • AlfonsiAlfonsi USMember ✭✭✭
    edited April 20
  • batmacibatmaci DEMember ✭✭✭✭✭

    if you havent used any renderer why uwp is not listed? it should work theoritically not?

  • AlfonsiAlfonsi USMember ✭✭✭

    yup it works on uwp

  • batmacibatmaci DEMember ✭✭✭✭✭

    @Alfonsi said:
    yup it works on uwp

    cool. i will check it. thanks

Sign In or Register to comment.