-
- Sierra
Setting {TemplateBinding} on a property in a ControlTemplate
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:
Example of what I'd like to achieve:
Code: Select all
<ControlTemplate x:Key="Template.Button" TargetType="Button">
<Border x:Name="Border" Background="{TemplateBinding Background}"/>
</ControlTemplate>Re: Setting {TemplateBinding} on a property in a ControlTemplate
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!
----------------------------------------
----------------------------------------
So to summarise, what your target was:
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:
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!
----------------------------------------
----------------------------------------
So to summarise, what your target was:
Code: Select all
<ControlTemplate x:Key="Template.Button" TargetType="Button">
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
Code: Select all
<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
Hey Dorian,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:
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:Code: Select all<ControlTemplate x:Key="Template.Button" TargetType="Button"> <Border Background="{TemplateBinding Background}"/> </ControlTemplate>
Code: Select all<ControlTemplate x:Key="Template.Button" TargetType="Button"> <Border Background="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}"/> </ControlTemplate>
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.
-
-
sfernandez
Site Admin
- Posts: 3363
- Joined:
Re: Setting {TemplateBinding} on a property in a ControlTemplate
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
Wonderful to hear this! Thank you!This is just a WIP issue, we have plans to define bindings inside templates as TemplateBinding when appropriate to reduce xaml code.
Who is online
Users browsing this forum: No registered users and 1 guest