Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin Forms - binding to a ControlTemplate

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.

enter image description here

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

enter image description here

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

enter image description here

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>
like image 660
John Livermore Avatar asked Feb 13 '17 21:02

John Livermore


1 Answers

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.

like image 72
Zroq Avatar answered Oct 05 '22 13:10

Zroq