Forums | NoesisGUI

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:

Code: Select all

 
<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:

Code: Select all

 <ControlTemplate x:Key="Template.Button" TargetType="Button">
      <Border Background="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}"/>
</ControlTemplate>

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