How to use x:bind inside ControlTemplate in UWP - xaml

Question

Hi I was just trying to use x:Bind in ControlTemplate of Button in UWP my simple code is below,
<Grid>
<TextBox x:Name="txtWidth"/>
<Button x:Name="btnEllipse" PointerEntered="btnEllipse_PointerEntered" PointerExited="btnEllipse_PointerExited" Click="btnEllipse_Click">
<Button.Template>
<ControlTemplate>
<Ellipse x:Name="myEll" Width="{x:Bind ShapeWidth,Mode=OneWay}" Height="{Binding Width,ElementName=myEll}" Fill="Purple" Stroke="Black" StrokeThickness="2" />
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
C# Code behind file
double _shapeWidth= 100;
public Double ShapeWidth
{
get { return _shapeWidth; }
set { _shapeWidth = value; }
}
I am getting error that
target type' is required to use x:Bind inside a ControlTemplate
Please let me know where I am making mistake,?
Another scenario can we bind txtWidth using Binding or x:Bind in Ellipse Width here?

Answer 1

Based on this document, when you try to use x:bind in ControlTemplate, you need to add the TargetType property(e.g. <ControlTemplate TargetType="Button">). However, The function of x:bind is like TemplateBinding, it can only bind with the property of Button, so if you want to bind with the property which declared in code-behind, it's better to use Binding and declare the DataContext. For example:
.xaml:
<Button x:Name="btnEllipse" PointerExited="btnEllipse_PointerExited" Click="btnEllipse_Click">
<Button.Template>
<ControlTemplate>
<Ellipse x:Name="myEll" Width="{Binding ShapeWidth}" Height="{Binding Width,ElementName=myEll}" Fill="Purple" Stroke="Black" StrokeThickness="2" />
</ControlTemplate>
</Button.Template>
</Button>
.cs:
this.DataContext = this;
Another scenario can we bind txtWidth using Binding or x:Bind in
Ellipse Width here?
If you want to bind the width of txtWidth with the width of Ellipse, you could use ElementName to find the txtWidth element and use binding to bind with its width.
<TextBox x:Name="txtWidth" Width="100" Text="efwiehfiweh"/>
<Button x:Name="btnEllipse" PointerExited="btnEllipse_PointerExited" Click="btnEllipse_Click">
<Button.Template>
<ControlTemplate>
<Ellipse x:Name="myEll" Width="{Binding Width,ElementName=txtWidth,Mode=OneWay}" Height="{Binding Width,ElementName=myEll}" Fill="Purple" Stroke="Black" StrokeThickness="2" />
</ControlTemplate>
</Button.Template>
</Button>