Custom Tabbed Page

KyawWintThuKyawWintThu USMember
edited September 2017 in Cross Platform with Xamarin

Hi All,

I want to create a tabbed page like below image in Cross Platform.
But I have no idea right now, please help me how can achieve.

Posts

  • johnstrimjohnstrim USMember ✭✭

    There is this magical tool called Google that answers questions that people usually ask..... You might like it if you try...

    Here is a few links that could help for example:

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

  • AndyAndy Member ✭✭

    Does anyone have a suggestion on how to solve this? It seems the options are implement custom renderers for TabbedPage or try creating a custom MultiPage in the Xamarin forms project which contains two pages stacked vertically but I'm not sure MultiPage actually supports that because Carousel and TabbedPage (subclasses of Multipage) only show one of their child pages at a time.

    This should really come out of the box for Xamarin Forms??

  • AlfonsiAlfonsi USMember ✭✭✭

    For custom tabs, you can use these ones:

    https://github.com/roubachof/Sharpnado.Presentation.Forms

    The post explaining the component can be found here:

    https://www.sharpnado.com/pure-xamarin-forms-tabs/

    Example of use:

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50 />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
    
    
            <tabs:TabHostView Grid.Row="0"
                              SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
                <tabs:UnderlinedTabItem 
                    SelectedTabColor="{StaticResource White}" 
                    UnselectedLabelColor="{StaticResource White}" 
                    Label="Tab 1" />
                <tabs:UnderlinedTabItem 
                    SelectedTabColor="{StaticResource White}" 
                    UnselectedLabelColor="{StaticResource White}" 
                    Label="Tab 2" />
            </tabs:TabHostView>
    
            <ScrollView Grid.Row="1">
                <tabs:ViewSwitcher x:Name="Switcher"
                                   Animate="True"
                                   SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">
                    <details:Tab1View Animate="True" BindingContext="{Binding Tab1ViewModel}" />
                    <details:Tab2View Animate="True" BindingContext="{Binding Tab2ViewModel}" />
                </tabs:ViewSwitcher>
            </ScrollView>
    
        </Grid>
    
  • Rajesh_AngappanRajesh_Angappan INMember ✭✭

    For Custom tab view/page i am using the xam.Tabview (Xamarin.Forms) Component and it's working as expected.
    It has the support for custom header and content view. Also, we can place the tabview any parent view.

    Install Nuget: TabView Nuget

    Sample: Tabview Sample

Sign In or Register to comment.