Nested views in tabs binding to separate ViewModel - data-binding

Question

Is there a way how to provide a nested view it's own viewmodel?
Example:
Master view of type TabbedView has multiple tabs.
<mvx:MvxTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Foo.Core.Pages.Access.MainPage"
xmlns:res="clr-namespace:Foo.Core.Resources;assembly=Foo.Core"
xmlns:mvx="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
xmlns:views="clr-namespace:Foo.Core.Pages.Access">
<TabbedPage.Children>
<views:LoginPage></views:LoginPage>
<views:RegisterPage></views:RegisterPage>
</TabbedPage.Children>
</mvx:MvxTabbedPage>
The LoginPage and RegisterPage are in separate views. But all the binding must be in the MainViewModel and I want the bindings to be separately in the LoginViewModel and RegisterViewModel.
Is there a way how to setup the binding to the properties to appropriate viewmodel? Preferably in XAML.

Answer 1

In order that to work you need to let the NavigationService (and therefore the Presenter) to load the children pages:
Xamarin.Forms View Presenter -> MvxTabbedPagePresentationAttribute
In your case it should be something like:
ViewModels
public class MyTabsContainerViewModel : MvxViewModel
{
private readonly IMvxNavigationService _navigationService;
public MyTabsContainerViewModel(IMvxNavigationService navigationService)
{
_navigationService = navigationService ?? throw new ArgumentNullException(nameof(navigationService));
}
public override async void ViewAppearing()
{
await ShowInitialViewModels();
base.ViewAppearing();
}
private async Task ShowInitialViewModels()
{
var tasks = new List<Task>();
tasks.Add(_navigationService.Navigate<LoginViewModel>());
tasks.Add(_navigationService.Navigate<RegisterViewModel>());
await Task.WhenAll(tasks);
}
}
public class LoginViewModel : MvxViewModel
{
}
public class RegisterViewModel : MvxViewModel
{
}
Views
MyTabsContainerPage.xaml
<?xml version="1.0" encoding="utf-8"?>
<views:MvxTabbedPage x:TypeArguments="viewModels:MyTabsContainerViewModel" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:Foo.Core.ViewModels;assembly=Foo.Core"
xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
x:Class="Foo.Core.Pages.Access.MyTabsContainerPage">
</views:MvxTabbedPage>
MyTabsContainerPage.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
[MvxMasterDetailPagePresentation(Position = MasterDetailPosition.Detail, NoHistory = true)]
public partial class MyTabsContainerPage : MvxTabbedPage<MyTabsContainerViewModel>
{
public MyTabsContainerPage()
{
InitializeComponent();
}
}
LoginPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage x:TypeArguments="viewModels:LoginViewModel" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:Foo.Core.ViewModels;assembly=Foo.Core"
xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
x:Class="Foo.Core.Pages.Access.MixedNavTab1Page">
<StackLayout>
<Label Text="This is Tab 1" />
</StackLayout>
</views:MvxContentPage>
LoginPage.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
[MvxTabbedPagePresentation(WrapInNavigationPage = false, Title = "LoginTab1")]
public partial class LoginPage : MvxContentPage<LoginViewModel>
{
public LoginPage()
{
InitializeComponent();
}
}
RegisterPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage x:TypeArguments="viewModels:RegisterViewModel" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:Foo.Core.ViewModels;assembly=Foo.Core"
xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
x:Class="Foo.Core.Pages.Access.RegisterPage">
<StackLayout>
<Label Text="This is Tab 2" />
</StackLayout>
</views:MvxContentPage>
RegisterPage.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
[MvxTabbedPagePresentation(WrapInNavigationPage = false, Title = "RegisterTab2")]
public partial class RegisterPage : MvxContentPage<RegisterViewModel>
{
public RegisterPage()
{
InitializeComponent();
}
}
Full sample in the Playground project
HIH