How do I bind a value to a referenced custom content page (XAML) - xaml

Question

I created a custom ContentPage to show a circle avatar with initials. When I pass a value via binding it comes up as null, I debugged to check this. Can someone help me please? Thanks.
HomePage.xaml
<views:CircleView CircleText="{Binding Initials}"/>
CircleView.xaml
<Frame x:Name="circleFrame">
<Label x:Name="circleLabel"
Text="{Binding CircleText}"/>
</Frame>
CircleView.xaml.cs
public partial class CircleView : ContentView
{
public CircleView()
{
InitializeComponent();
BindingContext = this;
}
public static readonly BindableProperty CircleTextProperty =
BindableProperty.Create(nameof(CircleText), typeof(string), typeof(CircleView), null);
public string CircleText
{
get { return (string)GetValue(CircleTextProperty); }
set { SetValue(CircleTextProperty, value); }
}
}

Answer 1

You could try the code below.
CircleView.xaml：
<Frame x:Name="circleFrame">
<Label x:Name="circleLabel"/>
</Frame>
CircleView.xaml.cs:
public CircleView()
{
InitializeComponent();
}
public static readonly BindableProperty CircleTextProperty =
BindableProperty.Create(nameof(CircleText), typeof(string), typeof(CircleView), propertyChanged:(b,o,n)=>(b as CircleView).OnChanged());
private void OnChanged()
{
circleLabel.Text = CircleText;
}
public string CircleText
{
get { return (string)GetValue(CircleTextProperty); }
set { SetValue(CircleTextProperty, value); }
}
MainPage.xaml:
<views:CircleView CircleText="{Binding Initials}"/>
MainPage.xaml.cs:
public string Initials { get; set; }
public MainPage()
{
InitializeComponent();
Initials = "Hello";
this.BindingContext = this;
}

Answer 2

In CircleView.xaml, you should include a source to the binding, would be something like:
<ContentView x:Name="Self">
<Frame x:Name="circleFrame">
<Label x:Name="circleLabel"
Text="{Binding source={x:reference Self}, Path=CircleText}"/>
</Frame>
</ContentView>