CODEWITHSUNDEEP
c#xamlxamarintabs
christinapapaaa11
christinapapaaa11

Reputation: 73

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?

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>

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>

Upvotes: 1

Views: 1224

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

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

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>

Then the ViewModel of MainTabbedPage as follow:

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();
    }
}

The ChildrenOneViewModel,ChildrenTwoViewModel,ChildrenThreeViewModel is sample as follow:

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

The Xaml of TabChildrenPage1,TabChildrenPage2,TabChildrenPage3 is:

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

Now when navigating to MainTabbedPage, pass viewmodel as follow:

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

The effect:

enter image description here

Here is the sample link.

Upvotes: 4

Related Questions