Xamarin.Forms Control Template Binding Not Working - mvvm

Question

I've specified a control template in my App.xaml:
<?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="MyApp.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="PageTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0"
Grid.RowSpan="3"
BackgroundColor="#2B653E"/>
<Label Grid.Row="1"
TextColor="White"
HorizontalOptions="Center"
FontSize="36"
FontFamily="TimesNewRomanPS-BoldMT"
Text="{TemplateBinding BindingContext.HeadingText}"/>
<Image Grid.Row="2"
Grid.RowSpan="2"
Source="TGL_BG"/>
<ContentPresenter Grid.Row="4"/>
</Grid>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
You can see I've got one of my controls databound:
Text="{TemplateBinding BindingContext.HeadingText}"
The control template works fine, I can add it to a page without any problems, except for the bound property doesn't display:
Here is my page code:
<?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="MyApp.Pages.ContactPage">
<ContentView ControlTemplate="{StaticResource PageTemplate}">
<StackLayout>
<!-- Page content here, removed for brevity -->
</StackLayout>
</ContentView>
</ContentPage>
Here is my code behind:
using System;
using System.Collections.Generic;
using MyApp.ViewModels;
using Xamarin.Forms;
namespace MyApp.Pages
{
public partial class ContactPage : ContentPage
{
public ContactPage(ContactPageViewModel viewModel)
{
InitializeComponent();
viewModel.Navigation = Navigation;
BindingContext = viewModel;
}
}
}
Here you can see I'm setting the binding context to the ViewModel (which works for everything outside the template). And here is my ViewModel:
using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using MyApp.Helpers;
using Xamarin.Forms;
namespace MyApp.ViewModels
{
public class ContactPageViewModel : ViewModel
{
public string HeadingText = "Contact Us";
//Other properties and commands here, removed for brevity
}
}
As you can see I've got a public property here called 'HeadingText' which is what I'm binding to in the view.
I've read the documentation and a few examples/tutorials. According to what I can see this should work. Can anyone see what's wrong with this?
EDIT:
I've now got this working. In my ViewModel, I changed this:
public string HeadingText = "Contact Us";
to this:
public string HeadingText
{
get
{
return "Contact Us";
}
}
Leaving the question open now as hoping someone can provide an explanation.

Answer 1

binding only works with public properties
// this is a field, not a property
public string HeadingText = "Contact Us";
// this is a property
public string HeadingText
{
get
{
return "Contact Us";
}
}