TabbedPage 内的 xamarin mvvmcross TabbedPage
xamarin mvvmcross TabbedPage inside TabbedPage
如何使用 mvvmcross 在 xamarin 表单中的选项卡式页面中轻松实现选项卡式页面?
TabbedPage1;
[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();
}
}
TabbedPage2;
[MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
public partial class TabbedPage2 : MvxTabbedPage<ViewModels.TabbedPage2ViewModel>
{
public TabbedPage2 ()
{
InitializeComponent();
}
}
我目前的情况是,tabbedpage2 显示为模态页面。
您可以在标签页中嵌套 TabView
。通过 NuGet 安装 Xam.Plugin.TabView
。 https://www.nuget.org/packages/Xam.Plugin.TabView
在视图文件夹中创建三个标签页。
标签页:
<?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>
请注意,如果您想在底部的标签页中制作标签。在您的主页中添加以下代码。
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
您可以从 TabbedPage_NestedTabView/TabbedPageDemo 中的 GitHub 下载代码示例
https://github.com/WendyZang/Test.git
如何使用 mvvmcross 在 xamarin 表单中的选项卡式页面中轻松实现选项卡式页面?
TabbedPage1;
[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();
}
}
TabbedPage2;
[MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
public partial class TabbedPage2 : MvxTabbedPage<ViewModels.TabbedPage2ViewModel>
{
public TabbedPage2 ()
{
InitializeComponent();
}
}
我目前的情况是,tabbedpage2 显示为模态页面。
您可以在标签页中嵌套 TabView
。通过 NuGet 安装 Xam.Plugin.TabView
。 https://www.nuget.org/packages/Xam.Plugin.TabView
在视图文件夹中创建三个标签页。
标签页:
<?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>
请注意,如果您想在底部的标签页中制作标签。在您的主页中添加以下代码。
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
您可以从 TabbedPage_NestedTabView/TabbedPageDemo 中的 GitHub 下载代码示例 https://github.com/WendyZang/Test.git