Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Hi I was just trying to use x:Bind in ControlTemplate of Button in UWP my simple code is below,

<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?
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>
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>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.