Xamarin Forms - binding to a ControlTemplate

Question

I am having trouble getting bindings defined in a ControlTemplate to work against my model.

Notice in the below ControlTemplate, I am using a TemplateBinding to bind to a property called Count (olive label). I am using Parent.Count as prescribed by this article, but neither values of Parent.Count nor Count are working.

The following page uses the ControlTemplate. Just to prove my ViewModel works I have a gray Label bound to the Count property as well.

Notice the resulting screen. The gray label is showing the Count property. The olive label from the ControlTemplate is not showing anything.

How can I make the Label in the ControlTemplate show the Count property from the ViewModel?

VIEW MODEL

namespace SimpleApp
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public MainViewModel()
        {
            _count = 10;
            Uptick = new Command(() => { Count++; });
        }

        private int _count;
        public int Count
        {
            get { return _count; }
            set
            {
                _count = value;
                OnPropertyChanged("Count");
            }
        }

        public ICommand Uptick { get; private set; }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

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"
             xmlns:local="clr-namespace:SimpleApp"
             x:Class="SimpleApp.MainPage"
             ControlTemplate="{StaticResource ParentPage}">
    <StackLayout>
        <Button Command="{Binding Uptick}" Text="Increment Count" />
        <Label Text="{Binding Count}" BackgroundColor="Gray" />
    </StackLayout>
</ContentPage>

CODE BEHIND

Notice the BindingContext is set to MainViewModel here. I need to use my own ViewModel and not the code behind.

namespace SimpleApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            BindingContext = new MainViewModel();

            InitializeComponent();
        }
    }
}

CONTROL TEMPLATE

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleApp.App">
    <Application.Resources>

        <ResourceDictionary>
            <ControlTemplate x:Key="ParentPage">

                <StackLayout>
                    <Label Text="{TemplateBinding Parent.Count}" BackgroundColor="Olive" />
                    <ContentPresenter />
                </StackLayout>

            </ControlTemplate>
        </ResourceDictionary>

    </Application.Resources>
</Application>

Should it be <Label Text="{TemplateBinding Count}" BackgroundColor="Olive" /> ? — Tony
Also check for update to the NuGets packages and Xamarin Itself? I reinstalled my PC, don´t have Xamarin here now. I would like to test here. — Tony

Zroq Zroq · Accepted Answer · 2017-02-14T10:08:51

On your ControlTemplate please use the following code:

<Label Text="{TemplateBinding BindingContext.Count}" BackgroundColor="Olive" />

It seems that BindingContext is not being automatically applied to your ContentPage child, maybe it could be a bug in Xamarin.

Xamarin Forms - binding to a ControlTemplate

1 Answers