Xamarin 表单将数据传递到选项卡式页面 [英] Xamarin Forms Passing Data to Tabbed Pages

问题描述

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

I'm collecting some data from a page and when the user taps a 'Next' button it navigates them to a tabbed container page, passing data that they input on the current to the tabbed container page. But how can I access this data on the children tabbed pages of the container?

容器页面 Xaml 文件:

The container page Xaml file:

<?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 文件:

The first tabbed page Xaml file:

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

推荐答案

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

You can create each ViewModel for Children Page , then contain them in the ViewModel of TabbedPage.

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

For example, create a MainTabbedPage and Xaml as follow:

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

Now when navigating to MainTabbedPage, pass viewmodel as follow:

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

效果:

这是示例链接.

这篇关于Xamarin 表单将数据传递到选项卡式页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！