Nested tabs views are not binding to separate ViewModel

Question

i want to bind viewmodel to nested tab views in xamarin prism framework

i created 4 main pages(A,B,C,D) as main tabs and inside first tab(A) i created two more tabs(A1,A2).but data for nested tabs are not binding.even viewmodel for that views(A1,A2) are not hitting

MenuPage.xml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage  xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Views.MenuPage"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"

             prism:ViewModelLocator.AutowireViewModel="True" 
              xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             xmlns:views="clr-namespace:MyApp.Views"

                BarBackgroundColor="White"
             android:TabbedPage.ToolbarPlacement="Bottom"
             NavigationPage.HasNavigationBar="True">

    <TabbedPage.Children>
        <views:A Title="A" Icon="abc.png" />
        <views:B Title="B" Icon="abc.png" />
        <views:C Title="C" Icon="abc.png" />
        <views:D Title="D" Icon="abc.png"/>
    </TabbedPage.Children>
</TabbedPage>

and my page A is like

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:views="clr-namespace:MyApp.Views"
             x:Class="MyApp.Views.A">
    <!--Pages can be added as references or inline-->
    <TabbedPage.Children>
    <views:A1 Title="A1" />
    <views:A2 Title="A2" />

        </TabbedPage.Children>
</TabbedPage>

and i have separate viewmodel for A1 and A2.

so if i directly bind A1 to main navigation page it will work properly and render data.but if i do like above viewmodel for A1 is not hitting the constructor and nothing is displaying apart from static data.i am new to tabbed page navigation.any help is appreciated.this the view i am trying t achieve

What kind of requirement do you have? Why do you need to nest TabbedPages!? — FreakyAli
@G.hakim i added the image to my question what i am trying to achieve.. — ebk
@ G.hakim do you have any suggestion for how to acheive this — ebk
u can create those above stuff in grid and can add contentview to grid on click — Ronak Shethia

Anonymous Anonymous · Accepted Answer · 2019-05-17T06:15:48

I find we should add AutowireViewModel in the page's XAML to load the view model we want:

xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"

Generally, we use containerRegistry.RegisterForNavigation<>(); to bind the custom view model to a certain view. But you placed a sub tabbed page in the root tabbed page. This caused the nested view losing the mapping to the corresponding view model. After adding the AutowireViewModel, this issue fixed. We could still use RegisterForNavigation to bind your custom view model to your special view instead of the automatic naming conversation.

Here is my sample for a simple nested tabbed page: https://github.com/landl0526/PrismTabDemo. Refer to it for more detailed code.

Moreover, this only works on the Android platform as iOS only has the bottom aligned tabbar.

Nested tabs views are not binding to separate ViewModel

1 Answers