TabbedPage 内的 xamarin mvvmcross TabbedPage

Posted 2023-03-25

【中文标题】TabbedPage 内的 xamarin mvvmcross TabbedPage

【英文标题】：xamarin mvvmcross TabbedPage inside TabbedPage

【发布时间】：2021-03-21 05:32:12

【问题描述】：

如何使用 mvvmcross 在 xamarin 表单的标签页内轻松实现标签页？

标签页1；

 [MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
    public partial class TabbedPage1: MvxTabbedPage<ViewModels.TabbedPage1ViewModel>
    
        public TabbedPage1()
        
            InitializeComponent();
        
    

临时页面；

 [MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Tab, Icon = "map_outline", WrapInNavigationPage = true, NoHistory = false)]
        public partial class TempPage: MvxContentPage<ViewModels.TempPageViewModel>
        
            public TempPage()
            
                InitializeComponent();
            
        

标签页2；

 [MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
    public partial class TabbedPage2 : MvxTabbedPage<ViewModels.TabbedPage2ViewModel>
    
        public TabbedPage2 ()
        
            InitializeComponent();
        
    

我目前的情况是，tabbedpage2 显示为模态页面。

【问题讨论】：

根据我的测试，如果您单独使用TabbedPage1-(Bottom) 的tabbedPage 模板或TabbedPage2-(Top) 的MvvmCross，它们都可以正常工作。但是如果你将MvxTabbedPage 设置为TabbedPage.Children，就会出错。您想尝试其他方法来使您的屏幕截图产生相同的效果吗？如果是，我可以为您提供代码。

是的，这就是我的问题，我还尝试在两个标签页之间添加另一个视图，例如； TabbedPage1-TempPageView-TabbedPage2。但它并没有像我预期的那样工作。

【参考方案1】：

您可以在标签页中嵌套TabView。通过 NuGet 安装 Xam.Plugin.TabView。 https://www.nuget.org/packages/Xam.Plugin.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

【讨论】：

感谢您的回答！这给了一些很好的灵感。但我想使用 mvvmcross 演示者属性。此解决方案不适用于 mvvvmcross。我也澄清了这个问题。

在期待一个简单的实施而不花费我所有的时间之后，我尝试了你的解决方案，它工作得很好。