[英]How to nest Tab views in Xamarin.Forms
I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView.我正在尝试在 Xamarin XAML 中创建此布局,但我无法弄清楚如何在 TabView 中组合 TabView。 I want 3 main tabs in the bottom and for each page 1-2 subtabs.
我希望底部有 3 个主选项卡,每个页面有 1-2 个子选项卡。 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.
在每个子选项卡上,我需要有一个带有列表项的 ScrollView(我认为这是要使用的正确元素),这使得它变得更加复杂。 Like this picture:
像这张图:
Any idea or guidance of how to achieve this?有关如何实现这一目标的任何想法或指导?
I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView.
我正在尝试在 Xamarin XAML 中创建此布局,但我无法弄清楚如何在 TabView 中组合 TabView。
If you want to do that, you could nest a TabView
in Tabbed page.如果你想这样做,你可以在 Tabbed 页面中嵌套一个
TabView
。
TabView
: https://github.com/chaosifier/TabView 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 页面中使用 TabView。
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.
在 MainPage 中添加以下代码。
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
You could download the code sample from GitHub in TabbedPage_NestedTabView/TabbedPageDemo https://github.com/WendyZang/Test.git您可以从 GitHub 中的 TabbedPage_NestedTabView/TabbedPageDemo https://github.com/WendyZang/Test.git下载代码示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.