Xamarin Forms binding button Command to parent BindingContext

Tomasz picture Tomasz · Apr 15, 2015 · Viewed 11.5k times · Source

I'm writing Xamarin application and I found difference between WPF which I cannot cross.

I'm using Xamarin Forms Labs to get Repeater control.

I have a Repeater, which repeats DataTemplate:

<DataTemplate>
  <Button Text="{Binding Text}" Command="{Binding CategorySelectedCommand}"  />
</DataTemplate>

But i would like to move command execution to my userControl Binding Context.

Normally with WPF it would look like:

Command={Binding ElementName=myUserControl, Path=DataContext.CategorySelectedCommand}

But it does not have ElementName property.

I have found that I could set BindingContext of my button like this:

BindingContext="{x:Reference myUserControl}"

But then I cannot bind Text property to my button's text.

How should I do this?

Answer

Krumelur picture Krumelur · Apr 15, 2015

You can use the Source property to specify a source for the binding that will be used instead of the current BindingContext. Then the text can come from the page's binding context and the command from somewhere else.

Command="{Binding CategorySelectedCommand, Source={x:Static me:SomeStaticClass.YourUserControl}}"

or

Command="{Binding CategorySelectedCommand, Source={DynamicResource yourUserControlKey}}"

or

Command="{Binding CategorySelectedCommand, Source={x:Reference myUserControl}}"

Here's a complete example. A common problem is to not implement INotifyPropertyChanged and set the property after the call to InitializeComponent().

XAML

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="test.MyPage" x:Name="ThePage">
    <Label Text="{Binding TextProp, Source={x:Reference ThePage}" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</ContentPage>

Code behind

public partial class MyPage : ContentPage
{
    public MyPage ()
    {
        this.TextProp = "Some Text";
        InitializeComponent ();
    }

    public string TextProp
    {
        get;
        set;
    }
}