Prism View is being assigned parent page ViewModel inside XCT tabview

Question

I have historically been using the syncfusion tab control as part of my layout on my apps, however, with the recent introduction of the Xamarin Community Toolkit (xct) and with the LazyView being in the latest pre-release nuget I want to use this and see what the experience is like.

I perform the registration as normal in the app.xaml.cs file as I always do:

ViewModelLocationProvider.Register<HomeView, HomeViewViewModel>();

When I am on my content page I add the view to a tab item:

<xct:TabViewItem Icon="{AppThemeBinding Light={local:ImageResource App.Assets.Icons.Black.home_100px.png}, Dark={local:ImageResource App.Assets.Icons.White.home_100px.png}}" Text="Home">
            <xct:TabViewItem.Content>
                <xct:LazyView x:TypeArguments="dressmakerViews:HomeView" />
            </xct:TabViewItem.Content>
        </xct:TabViewItem>

At this point the view is added as expected but is assigned the viewmodel of the contentpage instead of the viewmodel I registered for the view.

Obvious troubleshooting here was to use LazyView outside of the tabview and that assigned the expected viewmodel.

My question here is to help me understand why it does this and how to resolve the problem.

As a workaround to get the app working I've had to move out the code into the view model for the content page but everything here feels wrong and I want to be in a position to resolve.

Answer 1

For some reason, TabView replaces any previous BindingContext values assigned to TabItems with its own BindingContext when it changes..

As a work-around you can add a listener to BindingContextChanged event for each TabViewItem.Content and reassign to its expected ViewModel.

UPDATE:

You can also wrap TabView's Content with a ContentView

        <xct:TabViewItem Icon="{AppThemeBinding Light={local:ImageResource App.Assets.Icons.Black.home_100px.png}, Dark={local:ImageResource App.Assets.Icons.White.home_100px.png}}" Text="Home">
            <xct:TabViewItem.Content>
                <ContentView>
                    <xct:LazyView x:TypeArguments="dressmakerViews:HomeView" />
                </ContentView>
            </xct:TabViewItem.Content>
        </xct:TabViewItem>

That way, LazyView's BindingContext won't be overwritten.