如何在 Xamarin.Forms 中嵌套选项卡视图答案

【问题标题】：How to nest Tab views in Xamarin.Forms如何在 Xamarin.Forms 中嵌套选项卡视图
【发布时间】：2020-01-17 21:01:17
【问题描述】：

我正在尝试在 Xamarin XAML 中创建此布局，但我无法弄清楚如何在 TabView 中组合 TabView。我想要底部有 3 个主标签，每页有 1-2 个子标签。在每个子选项卡上，我都需要一个带有列表项的 ScrollView（我认为这是要使用的正确元素），这使得它更加复杂。喜欢这张照片：

关于如何实现这一点的任何想法或指导？

【问题讨论】：

您可能会使用带有 3 个孩子的主堆栈视图。顶部的水平堆栈，滚动视图，然后是底部的水平堆栈。将按钮放入其中。当你点击一个按钮时，让它交换必要的内容，然后做任何你想做的事情。
你有什么例子吗？

标签： xaml xamarin mobile xamarin.forms xamarin.android

【解决方案1】：

我正在尝试在 Xamarin XAML 中创建此布局，但我无法弄清楚如何在 TabView 中组合 TabView。

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

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

在views文件夹中创建三个标签页。

标签页：

<?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>

然后在你的 tab1 页面中使用 TabView。

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>

请注意，如果您想在底部的标签页中制作标签。在您的 MainPage 中添加以下代码。

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

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

【讨论】：