Home > Software design >  control Tab view in xamarin forms
control Tab view in xamarin forms

Time:05-03

I have a Tab view Designed in my xamarin app application and i need to controlled it by navigation and appears specific pages, I put it by default in first page and want to navigate the second one.

this is my TabView :

  <Grid>
                <xct:TabView
                TabStripPlacement="Bottom"
                TabStripBackgroundColor="White"
                TabStripHeight="60"
                TabIndicatorColor="#2196f3"
                TabContentBackgroundColor="#2196f3">

                    <xct:TabViewItem
                    Icon="triangle.png"
                    Text="Patient Details"
                    TextColor="#2196f3"
                    TextColorSelected="#2196f3"
                    FontSize="12"
                        >
                        <Grid 
                        BackgroundColor="Gray">
                            <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                        </Grid>
                    </xct:TabViewItem>

                    <xct:TabViewItem
                    Icon="circle.png"
                    Text="Patient Follows up"
                    TextColor="#2196f3"
                    TextColorSelected="#2196f3"
                    FontSize="12">
                        <Grid>
                            <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                        </Grid>
                    </xct:TabViewItem>
                </xct:TabView>
            </Grid>

CodePudding user response:

We could not navigate pages inside TabView. TabView items accepts only views. This issue has be asked before and no feature supported for now.

You could use Shell instead. Shell supports tabs for pages. And you could do the navigation to specific tab wit the routes.

For the tabs in Shell, you could you use Tabbar directly or use the tab in FlyoutItem to achieve the similar featrures of TabView in Shell.

Register the routes:

<Shell ...>
<FlyoutItem ...
            Route="animals">
    <Tab ...
         Route="domestic">
        <ShellContent ...
                      Route="cats" />
        <ShellContent ...
                      Route="dogs" />
    </Tab>
        
...
</Shell>

Navigate to cats page:

await Shell.Current.GoToAsync("//animals/domestic/cats");

For more details, you could refer to to the MS docs. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation

  • Related