How to bind to reusable Content Views in Xamarin Forms?

Question

While approaching Xamarin forms cross platform development, I'm struggling with the definitions of reusable controls.  As a first and very basic example, I've developed a dummy component which looks like this:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vmBase="clr-namespace:TestApp.ViewModels.Base"
             mc:Ignorable="d"
             vmBase:ViewModelLocator.AutoWireViewModel="True"
             x:Class="TestApp.Views.Templates.HashtagContainerTemplateView"
             x:Name="this">
  <ContentView.Content>
        <StackLayout BindingContext="{Reference this}">
            <Label Text="{Binding Test}"/>
        </StackLayout>
    </ContentView.Content>
</ContentView>

Where the code behind is:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TestApp.Views.Templates
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HashtagContainerTemplateView : ContentView
    {

        public static readonly BindableProperty TestProperty = BindableProperty.Create(
            propertyName: nameof(Test),
            returnType: typeof(string),
            declaringType: typeof(HashtagContainerTemplateView),
            defaultBindingMode: BindingMode.TwoWay,
            defaultValue: "I am the default value",
            propertyChanged: TestPropertyChanged);

        private static void TestPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            System.Diagnostics.Debugger.Break();    // This is called only when binding with constant values
        }

        public string Test
        {
            get => (string)GetValue(TestProperty);
            set
            {
                SetValue(TestProperty, value);
                System.Diagnostics.Debugger.Break();    // This is never called
            }
        }

        public HashtagContainerTemplateView()
        {
            InitializeComponent();
        }
    }
}

I am trying to load this view into a page by binding the Test property with a value set by the parent ViewModel as you can see here:

namespace TestApp.ViewModels
{
    public class MainViewModel : BaseViewModel
    {

        private string _testString;

        public string TestString 
        { 
            get => _testString; 
            set
            {
                _testString = value;
                RaisePropertyChanged();
            }
        }

        public MainViewModel()
        {
            
        }


        // This is called by the View Model Locator
        public override async Task InitializeAsync(object navigationData)
        {
            TestString = "I am the binded string";

            await base.InitializeAsync(navigationData);
        }
    }
}

Finally, the View is loaded into the parent Page as this:

<templates:HashtagContainerTemplateView Test="I am a costant string"/><!--This Works-->  
<templates:HashtagContainerTemplateView Test="{Binding TestString}"/> <!--Not Working-->

When running the App the labels displayed are:
I am a costant string which is as expected
I am the default value which is the default value for the Property, instead of the one I've passed through binding

After some debugging I realized that the TestPropertyChanged is called only when binding with constant values and the Test  setter is never called - see the breakpoints inside the code behind, right above - so I think this is the point... 

I know there are many topics like this, even here on SO, but I really can't make it work... I believe there is something really simple I'm missing ...

Final note: I am using the Microsoft eShopOnContainers project as a reference, hence I am using the View Model Locator approach. This is why the intialization is not in the ctor but in the InitializeAsync function.

Microsoft itself has a section about Content Views in the documentation, but no bindings are used...

Answer 1

You need to change the following:-

Text="{Binding Test,  Source={x:Reference this}}"

And remove the PropertyChanged to null.

Answer 2

I use your code and it works well on my side. I guess you forget to set the BindingContext in the Parent Page.

Here is how I use it:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        BindingContext = new MainViewModel();
    }
}

public class MainViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private string _testString;

    public string TestString
    {
        get => _testString;
        set
        {
            _testString = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("TestString"));
            }
        }
    }

    public MainViewModel()
    {
        TestString = "I am the binded string";
    }

}

And in 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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:templates="clr-namespace:App593"
             mc:Ignorable="d"
             x:Class="App593.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <templates:View1 Test="I am a costant string"/>
        <templates:View1 Test="{Binding TestString}"/>
    </StackLayout>

</ContentPage>

Remember to add BindingContext = new MainViewModel(); in the Parent Page. Other codes in my project is exactly the same as yours.

Answer 3

The problem was the View Model Locator, which was messing with the binding context and was just a leftover from a copy/paste.

Removing the vmBase:ViewModelLocator.AutoWireViewModel="True" from the Xaml solved the issue!

Thanks to @ValeriyKovalenko who made me spot it!