Databinding in XAML for MasterDetailPage in Xamarin.Forms

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!

Thanks for asking this question! It took me a day trying to figure it out and I wouldn't have without this question. — Tomas Pajonk

Stephane Delcroix Stephane Delcroix · Accepted Answer · 2014-06-16T07:20:42

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.

Databinding in XAML for MasterDetailPage in Xamarin.Forms

1 Answers