如何在 Xamarin.Forms 中嵌套 Tab 视图

问题描述

我正在尝试在 Xamarin XAML 中创建此布局，但我无法弄清楚如何在 TabView 中组合 TabView.我希望底部有 3 个主选项卡，每个页面有 1-2 个子选项卡.在每个子选项卡上，我需要有一个带有列表项的 ScrollView(我认为这是要使用的正确元素)，这使得它变得更加复杂.喜欢这张图:

对如何实现这一目标有任何想法或指导吗?

解决方案

如果你想这样做，你可以在标签页中嵌套一个 TabView.

TabView:

您可以从 GitHub 的 TabbedPage_NestedTabView/TabbedPageDemo 下载代码示例https://github.com/WendyZang/Test.git

I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView. I want 3 main tabs in the bottom and for each page 1-2 subtabs. On each subtab I will need to have a ScrollView(I think thats the right element to use) with list items, which makes it even more complex. Like this picture:

Any idea or guidance of how to achieve this?

解决方案

If you want to do that, you could nest a TabView in Tabbed page.

TabView:https://github.com/chaosifier/TabView

Create three tab pages in views folder.

Tabbed Page:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Views="clr-namespace:TabbedPageDemo.Views"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
BarBackgroundColor="Blue"
BarTextColor="White"
mc:Ignorable="d">

<Views:Tab1_Page Title="TAB1" />
<Views:Tab2_Page Title="TAB2" />
<Views:Tab3_Page Title="TAB3" />

</TabbedPage>

And then use TabView in you tab1 page.

Tab1_Page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="TabbedPageDemo.Views.Tab1_Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:local="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
    <local:TabViewControl>
        <local:TabViewControl.ItemSource>
            <local:TabItem HeaderText="SUBTAB1">
                <StackLayout VerticalOptions="Start" Padding="10">
                    <Button
                    BackgroundColor="White"
                    Text="List Item"
                    TextColor="Black"/>
                </StackLayout>
            </local:TabItem>
            <local:TabItem HeaderText="SUBTAB2">
                <Image Source="pink.jpg" />
            </local:TabItem>
        </local:TabViewControl.ItemSource>
    </local:TabViewControl>
</ContentPage.Content>
</ContentPage>

Please note, if you want to make the tabs in tabbed page in the bottom. Add the code below in your MainPage.

 On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

You could download the code sample from GitHub in TabbedPage_NestedTabView/TabbedPageDemohttps://github.com/WendyZang/Test.git

这篇关于如何在 Xamarin.Forms 中嵌套 Tab 视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！