Databinding in XAML for MasterDetailPage in Xamarin.Forms - xaml

Question

So far, most examples using Xamarin.Forms are using C# for building up the UI. I prefer using XAML for the UI, and databind it to ViewModels.
I'm having trouble using the Xamarin.Forms.MasterDetailPage in combination with XAML, and I can't seem to port the C# example to XAML + ViewModels.
This is the XAML I got so far:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master BindingContext="{Binding Menu}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail BindingContext="{Binding Detailpage}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
The component works: I do see the 'Master' and 'Detail' labels. The bound labels (on the BindingContext objects) are not displayed.
I've used loads of different combinations, but I'm still stuck: How does this work? Is my binding incorrect (should it be on the "ContentPage"), can't I bind to the .Master and .Detail properties etc.? How should the "Menu" and "Detailpage" bindings look like?
It would be a huge help if anyone could help me out! The next step would be that the .Detail will be changed when a button is pressed in the .Master . Thanks in advance!

Answer 1

Your Xaml is almost ok, but:
The {BindingContext} are invalid on the properties and should be on the ContentPage elements
MasterDetailPage.Master require a Page.Title to be set, or it throws.
Here's the correct Xaml working for me:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master>
<ContentPage Padding="5, 25" BindingContext="{Binding Menu}" Title="Master">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="5, 25" BindingContext="{Binding Detailpage}">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I tested it with an anonymous type as the page view model:
public MyMDPage ()
{
InitializeComponent ();
BindingContext = new {
Menu = new { Subtitle = "I'm Master" },
Detailpage = new { Subtitle = "I'm Detail" }
};
}
and this works just fine. In your case, you probably want concrete types instead of anonymous ones for your view model, but you get the idea.