简体   繁体   中英

control Tab view in xamarin forms

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>

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://learn.microsoft.com/en-us/xamarin/xamarin.forms/app-fundamentals/shell/navigation

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM