Sierra

Setting {TemplateBinding} on a property in a ControlTemplate

25 Jul 2024, 14:15

I can't figure out how to set a {TemplateBinding} value for a property of an element in a ControlTemplate. From what I see I can only set a Relative binding of Self or TemplatedParent mode. Would appreciate any suggestions here. :)

Example of what I'd like to achieve:
<ControlTemplate x:Key="Template.Button" TargetType="Button">
      <Border x:Name="Border" Background="{TemplateBinding Background}"/>
</ControlTemplate>
 
User avatar
dstewart
Site Admin
Posts: 133
Joined: 22 Jan 2024, 11:41

Re: Setting {TemplateBinding} on a property in a ControlTemplate

26 Jul 2024, 12:46

Hey Sierra,

So I've just recreated in Studio what I understand you are looking to achieve; I'll run through the entire process from the top including creating the Template, with awareness that there are some steps here which will be self-explanatory, or already completed for you, but just for the sake of tutorialisation for anyone else reading this :)

Creating the Button Template
1) Open a Page from the the Assets Panel (Ctrl+1)
2) From the Add Elements Panel (Ctrl+2), search for 'Button' under the Basic Input category, and drag it into the Page.
3) Right-click on the dragged-in Button from either the Navigator, or on the Stage, and from the 'Template' context menu, select 'Create'. This will open the Template it in 'Edit Mode'.

Setting The TemplateBinding within the Template:
4) Whilst still in Button Template's 'Edit Mode', click on the pre-existing Border in either the Navigator or on the Stage, and navigate to its Properties Panel on the right of the application window.
5) Hover over the Border's 'Background' Property, click on its '3-dot' menu, and select 'Create Binding'.
6) In the Binding menu for the Background, in the 'Mode' field, select 'TemplatedParent', and in the 'Path' field, select 'Background (Brush) '. Note that it's the 'Background (Brush)' option that needs to be selected, not any of its children in its expander.

Testing the Binding:
7) Exit the Template's 'Edit Mode' by either double-clicking on empty Stage area, or clicking the 'Return scope' button in the lower-left of the Stage next to the pink Template label.
8) Select the Button in the Navigator, or on the Stage, and navigate to its Properties Panel on the right of the application window.
9) Click on its 'Background' property, and select any colour. This should update the colour of the Border within the Button.

----------------------------------------

And that should be it!

----------------------------------------
TemplateBindingControl.jpg
----------------------------------------

So to summarise, what your target was:
 
<ControlTemplate x:Key="Template.Button" TargetType="Button">
     <Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
 
And once you rename your x:Name and the name of the Template to your liking, remove the automatically-generated BorderBrush/Thickness you may not want, and any other things you may wish to change or discord, the above steps will give you the following syntax:
 <ControlTemplate x:Key="Template.Button" TargetType="Button">
      <Border Background="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}"/>
</ControlTemplate>
 
Sierra

Re: Setting {TemplateBinding} on a property in a ControlTemplate

29 Jul 2024, 11:56

Hey Sierra,

So I've just recreated in Studio what I understand you are looking to achieve; I'll run through the entire process from the top including creating the Template, with awareness that there are some steps here which will be self-explanatory, or already completed for you, but just for the sake of tutorialisation for anyone else reading this :)

Creating the Button Template
1) Open a Page from the the Assets Panel (Ctrl+1)
2) From the Add Elements Panel (Ctrl+2), search for 'Button' under the Basic Input category, and drag it into the Page.
3) Right-click on the dragged-in Button from either the Navigator, or on the Stage, and from the 'Template' context menu, select 'Create'. This will open the Template it in 'Edit Mode'.

Setting The TemplateBinding within the Template:
4) Whilst still in Button Template's 'Edit Mode', click on the pre-existing Border in either the Navigator or on the Stage, and navigate to its Properties Panel on the right of the application window.
5) Hover over the Border's 'Background' Property, click on its '3-dot' menu, and select 'Create Binding'.
6) In the Binding menu for the Background, in the 'Mode' field, select 'TemplatedParent', and in the 'Path' field, select 'Background (Brush) '. Note that it's the 'Background (Brush)' option that needs to be selected, not any of its children in its expander.

Testing the Binding:
7) Exit the Template's 'Edit Mode' by either double-clicking on empty Stage area, or clicking the 'Return scope' button in the lower-left of the Stage next to the pink Template label.
8) Select the Button in the Navigator, or on the Stage, and navigate to its Properties Panel on the right of the application window.
9) Click on its 'Background' property, and select any colour. This should update the colour of the Border within the Button.

----------------------------------------

And that should be it!

----------------------------------------

TemplateBindingControl.jpg

----------------------------------------

So to summarise, what your target was:
 
<ControlTemplate x:Key="Template.Button" TargetType="Button">
     <Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
 
And once you rename your x:Name and the name of the Template to your liking, remove the automatically-generated BorderBrush/Thickness you may not want, and any other things you may wish to change or discord, the above steps will give you the following syntax:
 <ControlTemplate x:Key="Template.Button" TargetType="Button">
      <Border Background="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}"/>
</ControlTemplate>
Hey Dorian,

This works out fine, but I'm wondering why does the XAML end up using a much more complex binding? Setting the Templated Parent as a RelativeSource seems to be an overkill when in XAML I can just write TemplateBinding Background to do the same.
 
User avatar
sfernandez
Site Admin
Posts: 3363
Joined: 22 Dec 2011, 19:20

Re: Setting {TemplateBinding} on a property in a ControlTemplate

30 Jul 2024, 10:45

This is just a WIP issue, we have plans to define bindings inside templates as TemplateBinding when appropriate to reduce xaml code.
 
Sierra

Re: Setting {TemplateBinding} on a property in a ControlTemplate

30 Jul 2024, 11:36

This is just a WIP issue, we have plans to define bindings inside templates as TemplateBinding when appropriate to reduce xaml code.
Wonderful to hear this! Thank you!

Who is online

Users browsing this forum: No registered users and 1 guest