Question

我正在从页面中收集一些数据，当用户点击“下一步”按钮时，它会将它们导航到带标签的容器页面，并将他们在当前输入的数据传递到带标签的容器页面。但是如何在容器的子选项卡式页面上访问此数据？

容器页面Xaml文件：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:me="clr-namespace:MyApp.Views"
             x:Class="MyApp.Views.TransactionDetailsView">
    <TabbedPage.Children>
        <me:Page1TabView Title="Page 1" BindingContext="{Binding viewModel}"/>
        <me:Page2TabView Title="Page 2"/>
    </TabbedPage.Children>
</TabbedPage>

第一个选项卡式页面Xaml文件：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyApp.Views.Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="{Binding viewModel.Name}" TextColor="Black" FontSize="Large"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Answer 1

您可以为Child Page创建每个ViewModel，然后将它们包含在 TabbedPage 的ViewModel中。

例如，创建一个 MainTabbedPage 和Xaml，如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:AppTabbedPageModelPass"
            xmlns:local1="clr-namespace:AppTabbedPageModelPass.Views"
            x:Class="AppTabbedPageModelPass.MainTabbedPage">
  <!--Pages can be added as references or inline-->
    <local:TabChildrenPage1 Title="Tab 1" BindingContext="{Binding ChildrenfirstViewModel}"/>
    <local1:TabChildrenPage2 Title="Tab 2" BindingContext="{Binding ChildrensecondViewModel}" />
    <local1:TabChildrenPage3 Title="Tab 3" BindingContext="{Binding ChildrenthirdViewModel}" />
</TabbedPage>

然后按如下所示操作 MainTabbedPage 的ViewModel：

public class ViewModel
{
    public ChildrenOneViewModel ChildrenfirstViewModel { set; get; }
    public ChildrenTwoViewModel ChildrensecondViewModel { set; get; }
    public ChildrenThreeViewModel ChildrenthirdViewModel { set; get; }

    public ViewModel()
    {
        ChildrenfirstViewModel = new ChildrenOneViewModel();
        ChildrensecondViewModel = new ChildrenTwoViewModel();
        ChildrenthirdViewModel = new ChildrenThreeViewModel();
    }
}

ChildrenOneViewModel,ChildrenTwoViewModel,ChildrenThreeViewModel示例如下：

public class ChildrenOneViewModel
{
    public string Text { get; set; }
    public ChildrenOneViewModel()
    {
        Text = "First Childeren Page";
    }
}

TabChildrenPage1,TabChildrenPage2,TabChildrenPage3的 Xaml 是：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppTabbedPageModelPass.TabChildrenPage1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="{Binding Text}"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

现在，导航到 MainTabbedPage 时，按如下所示传递viewmodel：

ViewModel viewModel = new ViewModel();
MainTabbedPage mainTabbedPage = new MainTabbedPage();
mainTabbedPage.BindingContext = viewModel;
Navigation.PushAsync(mainTabbedPage);

效果：

这里是the sample link。

Xamarin表单将数据传递到选项卡式页面

1 个答案: