Objective

Our goal will be to create two custom Templates, and then to create two Styles, all of which can be seamlessly applied to any 📘 Button Element to shape its presentation.

Prerequisites

• A copy of the Noesis Studio desktop application (🎓 Installing and Setting Up Noesis Studio).
• Any 512x512 PNG image.
• Any 512x512 semi-transparent PNG pattern or texture.

Throughout this tutorial, you are of course free to take liberties and deviate from the prescribed colors, fonts, and assets, to make the result of this exercise truly your own. However, if you wish to continue with the exact same assets we'll be using throughout this exercise, the two PNG images we'll be using can be created from the following Stock assets: ↗️ Character Portrait [Adobe Stock], ↗️ Pattern [Adobe Stock].

Time to Complete

This tutorial will take ~45 min to complete.

Process Overview

To achieve our objective:

1. We will set up a new Studio Project.

2. We will set up the Page we'll be working from, and we will introduce multiple instances of the default 📘 Button Element to it.

3. We will study our visual targets against the Properties offered by the 📘 Button Element, and plan our approach.

4. We will create our first custom 'Cyber' 📘 Button Element Template.

5. We will create a first 'Banana' 📘 Button Element Style.

6. We will create a second 'Apple' 📘 Button Element Style.

7. We will create a second custom 'Jungle' 📘 Button Element Template, and set up its Bindings to allow both Styles to be seamlessly applied to it.

8. We will make additional adjustments to our Styles to be able to work across both our 'Cyber' and 'Jungle' Templates.

9. We will demonstrate, and verify the ability of the Templates and Styles to be applied to instances of the 📘 Button Element.

1. Project Setup

First, we will set up the Noesis Studio project we will be working in:

1.1 Create a folder on your machine in which this Project will live. You can name this folder as you wish, but we will be using ButtonTemplatesAndStyles.

1.2 Within the 🗀 ButtonTemplatesAndStyles directory created in the previous step, create an 🗀 Assets folder, and place two PNG images inside. These can be of anything you wish, but this exercise will be using a 512x512 character portrait, and a 512x512 pattern featuring transparency.

1.3 Launch the Noesis Studio application, and select 'Create New' within the launcher to create the project.

1.4 In the file explorer, navigate to the folder created in step 1.1 and name your project. You can name this project as you wish, but we will be using ButtonTemplatesAndStyles. Once you are done, select 'Create Project' to continue. This will open the Project.

1.5 Once within Studio, create a new Page by navigating to the the 📘 Assets Panel (Ctrl+1), pressing the + (Add) icon, and selecting 'New Page' from the context menu.

Creating a new Page will open it on the 📘 Stage.

At this point, the Page can also be renamed from the 📘 Assets Panel if desired.

2. Page Setup

Next, we will create the base layout of our Page that will display our instances of the 📘 Button Element vertically stacked, across two horizontal rows:

2.1 Navigate to the 📘 Add Element Panel (Ctrl+2), and use the Search function at the top of the Panel to find the 📘 StackPanel Element.

Once found, click-and-drag an instance to the 📑 Stage or to the 📘 Navigator Panel.

2.2 Click-and-drag two more instances of the 📘 StackPanel Element into the 📘 StackPanel Element introduced in the previous step.

Then, name each of them Row1_StackPanel, and Row2_StackPanel respectively by double-clicking on their name in the 📘 Navigator Panel, and inputting their new names.

2.3 One-by-one, from each of their 📘 Properties Panel, set the Properties of both the Row1_StackPanel and Row2_StackPanel Elements to:

Orientation	Horizontal
Height	MouseWheel (Press) on the 'Height' field to set it to 'Auto'.

The 'Horizontal' Orientation will ensure that Elements added to each 📘 StackPanel Element will stack side-by-side horizontally.

A Width and Height of 'Auto' will ensure that the instances of the 📘 Button Element we will introduce will inherit their size from the dimensions defined in the Element itself.

2.4 In the 📘 Navigator Panel, set the following Properties for the 📘 Grid Element, and each of the three instances of the 📘 StackPanel Element to:

Horizontal Alignment	Center
Vertical Alignment	Center

This will ensure that the size of these Elements gets defined by the dimensions of the Elements that will be placed within them.

2.5.1 From the 📘 Add Element Panel (Ctrl+2), use the Search function to find the 📘 Button Element.

Once found, click-and-drag three instances into Row1_StackPanel.

Then, in the same manner, click-and-drag three further instances of the 📘 Button Element into Row2_StackPanel.

This will produce a 3x2 grid of default Buttons on-Stage.

2.5.2 One-by-one, in the 📘 Navigator Panel, select each of the six instances of the 📘 Button Element, and from their 📘 Properties Panel, set their Properties to:

Width

MouseWheel (Press) on the 'Width' field to set it to 'Auto'.

3. Prep Work

Before constructing the Templates and Styles for our Buttons, it can be helpful to first to identify patterns that will help us determine which visual elements should be contained within a Template, and which will be driven by Styles.

In this exercise, we will be looking to create two Styles (a yellow 'Banana' and an red 'Apple' Style) that can be seamlessly shared between a 'Cyber' and a 'Jungle' 📘 Button Element Template.

Since Styles are driven by Properties, to strategize accordingly, we can identify what lies at the cross-section of available 📘 Button Element Properties, and what the 'Banana' Style and 'Apple' Style can leverage to define their appearance across both the 'Cyber' and 'Jungle' Templates.

Doing a study of our visual target through this lens will allow us to establish a Style map as follows:

'Banana' Style	'Apple' Style	Property	Used By
Yellow Key Color.	Red Key Color.	📘 Button Element Foreground Property.	'Jungle' and 'Cyber' Templates.
Left-Aligned Text.	Center-Aligned Text.	📘 Button Element Horizontal Content Alignment Property.	'Jungle' and 'Cyber' Templates.
Green Background Color.	Off-White Background Color.	📘 Button Element Background Property.	'Jungle' Template only.
16px Left Edge.	0px Left Edge.	📘 Button Element Border Thickness Property.	Jungle' Template only.

With this information, we can then proceed to build our first Template, which both Styles will be able to be applied to once those are configured.

4. 'Cyber' Template Creation

4.1.1 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 1, Position 1, and from the Templates category of its context menu, within the 'Button' subcategory, select 'Create'.

4.1.2 In the window that pops up directly after selecting 'Create', under the 'Name' field, input Button_Template_Cyber.

Then, under the 'Create in' field, select 'Global Resources' from the dropdown menu.

Lastly, select 'Accept' to finalize the creation of our new 'Cyber' Template and to save it to the Project's 🗋 GlobalResources.xaml Resource Dictionary.

Creating a new Template through this method will automatically open it in an isolated Template view (magenta 📑 Stage Border), from where we can access and completely customize its internal structure.

What you will notice upon entering this view, is that in the 📘 Navigator Panel, we now have access to the internal sub-Elements that make up the default 📘 Button Element Template.

4.2.1 From the 📘 Navigator Panel, expand all Elements, then delete the 📘 ContentPresenter Element by selecting it, then pressing Del.

4.2.2 Still remaining within the 📘 Navigator Panel, right-click the 'BackgroundBorder' 📘 Border Element, navigate to the 'Layout' context menu category, then from the 'Replace With' subcategory, select 'Grid'.

4.2.3 Rename the new 📘 Grid Element to Master_Grid by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

4.2.4 With the Master_Grid 📘 Grid Element still selected, set the following Properties within its 📘 Properties Panel:

Width	400
Height	240
Margin	32, 32, 32, 32

Next, we will be adding a glow to the button though applying a DropShadowEffect to the 📘 Grid Element. The glow color will be derived from each 📘 Button Element Style's Key Color.

4.2.5 Still remaining within the Master_Grid 📘 Properties Panel, under the 'Appearance' section, identify the 'Effect' Property, and select 'DropShadowEffect' from its dropdown.

This will reveal the Effect's options.

4.2.6 Hover over the now-visible 'Color' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Color' Property's input field, then select 'Create Binding.'

4.2.7 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode'.

This will allow the value for this Property to be passed through to it from a Property set in the 'Templated Parent', which in this case, corresponds to the 📘 Button Element Properties.

To then set the DropShadowEffect's color to use the color set as the Button's 'Foreground' color, click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, expand it, then select 'Color'.

Even though we have not yet created our custom Styles, following this operation, a color value will still appear in the DropShadowEffect's 'Color' Property field.

This is occuring because until we overwrite the Property value with one from our own Styles, it inherits its attributes from the framework's 📘 Button Element default Style, which features an off-white color in the 'Foreground' Property slot.

4.2.8 To finish off our work on the glow, staying within the Effect Properties in the 📘 Properties Panel, set the remaining DropShadowEffect Properties:

Direction	0
Opacity	75%
BlurRadius	24
ShadowDepth	0

It is important to note that a DropShadowEffect requires tangible shape to be able to render around. Therefore, since our 📘 Grid Element is empty, it won't display until we populate it with content in the following steps.

4.3.1 Navigate to the 📘 Add Element Panel (Ctrl+2), and use the Search function at the top of the Panel to find the 📘 Grid Element.

Once found, click-and-drag an instance to the 📘 Navigator Panel within the Master_Grid.

Then, rename the new 📘 Grid Element to Background_Grid by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

4.4.2 With the 📘 Add Element Panel (Ctrl+2) still open, use the Search function at the top of the Panel to find the 📘 Border Element. Once found, click-and-drag three instances to the 📘 Navigator Panel within the Background_Grid.

One of these will contain an image, one will serve as a color tint for the image, and one will serve as a gradient underlay for the text that will eventually feature.

From top to bottom in the 📘 Navigator Panel list, rename the newly-introduced 📘 Border Element instances to Image_Border, ImageTint_Border, and ImageGradient_Border respectively by double-clicking on their names, and inputting their new names.

4.4.3 Select Image_Border from the 📘 Navigator Panel, then from within its 📘 Properties Panel, under the 'Background' Property, click on the Property's field to open the Brush Picker.

Then, from within the Brush Picker, select the 'Image Brush' tab, and under the 'ImageSource' Property, find and select the 512x512 character portrait image prepared for the Project, and set the 'Stretch' Property to 'UniformToFill' to have it proportionally fill the space available

In addition to rendering the selected image, with a tangible object established, the glow we set up earlier should now appear as well.

4.4.4 Exit the Brush Picker, then set the remaining Image_Border Properties:

Border	MouseWheel (Press) on the 'Border' field to clear the local value.
Corner Radius	8, 8, 0, 0

Similarly to how we did with the glow, we will now configure the image's tint to display what will become our Style's key color.

4.4.5 Select ImageTint_Border from the 📘 Navigator Panel, then from within its 📘 Properties Panel, hover over the 'Background' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Color' Property's input field, then select 'Create Binding'.

4.4.6 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, and select it.

Similarly to the off-white that came through when we configured our glow, the framework's default Style 'Foreground' value is also being applied here.

4.4.7 Remaining within the ImageTint_Border 📘 Properties Panel, set the remaining Properties:

Opacity	25%
Border	MouseWheel (Press) on the 'Border' field to clear the local value.
Corner Radius	8, 8, 0, 0

4.4.8 Select ImageGradient_Border from the 📘 Navigator Panel, then from within its 📘 Properties Panel, under the 'Background' Property, click on the Property's swatch to open the Brush Picker.

Then, from within the Brush Picker, select the 'Linear Gradient Brush' tab, then set the following Linear Gradient Brush Properties:

	Gradient Stop #0	Gradient Stop #1
Offset	0%	100%
Color	#00000000	#FF000000

4.4.9 Exit the Brush Picker, then set the remaining ImageGradient_Border Properties:

Border	MouseWheel (Press) on the 'Border' field to clear the local value.
Corner Radius	8, 8, 0, 0

4.5.1 From the 📘 Navigator Panel, collapse the Background_Grid collection of Elements by clicking on the arrow to the left of the 📘 Grid Element

Then, navigate to the 📘 Add Element Panel (Ctrl+2), and use the Search function at the top of the Panel to find the 📘 Border Element.

Once found, click-and-drag an instance to the 📘 Navigator Panel within the Master_Grid as a sibling Element to the Background_Grid, placed directly under it in the list.

Lastly, rename the new 📘 Border Element to Content_Border by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

We will now set a visual border around the button that will display the 📘 Button Element 'Foreground' Property value:

4.5.2 Select Content_Border from the 📘 Navigator Panel, then from within its 📘 Properties Panel, hover over the 'Border' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Border' Property's input field, then select 'Create Binding'.

4.5.3 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, and select it.

4.5.4 Set the remaining Content_Border Properties:

Border Thickness	2, 2, 2, 16
Corner Radius	8, 8, 0, 0

4.5.5 Navigate to the 📘 Add Element Panel (Ctrl+2), and use the Search function at the top of the Panel to find the 📘 Grid Element.

Once found, click-and-drag an instance to the 📘 Navigator Panel within the Content_Border.

Then, rename the new 📘 Grid Element to Content_Grid by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

4.5.6 Within the 📘 Add Element Panel (Ctrl+2), use the Search function at the top of the Panel to find the 📘 TextBlock Element.

Once found, click-and-drag an instance to the 📘 Navigator Panel within the Content_Grid 📘 Grid Element.

Then, rename the new 📘 TextBlock Element to Label_TextBlock by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

4.5.9 Select Label_TextBlock from the 📘 Navigator Panel, then from within its 📘 Properties Panel, hover over the 'Text' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Text' Property's input field, then select 'Create Binding'.

4.5.10 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Content' entry in the list, and select it.

In this Template, we will make it so that no matter what text is relayed to the Button's 'Content' field, it will always be displayed in all lowercase:

4.5.11 Click on the expander directly under the Binding, and under the 'Converter' Property, select 'CaseConverter'. Then, from the 'Format' dropdown, select 'LowerCase'.

4.5.12 With Label_TextBlock still selected in the 📘 Navigator Panel, from within its 📘 Properties Panel, hover over the 'Horizontal Alignment' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Horizontal Alignment' Property's input field, then select 'Create Binding'.

4.5.13 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'HorizontalContentAlignment' entry in the list, and select it.

4.5.14 With Label_TextBlock still selected in the 📘 Navigator Panel, from within its 📘 Properties Panel, hover over the 'Foreground' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Foreground' Property's input field, then select 'Create Binding'.

4.5.15 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, and select it.

4.5.16 Still remaining within the Label_TextBlock 📘 Properties Panel, under the 'Appearance' section, identify the 'Effect' Property, and select 'DropShadowEffect' from its dropdown.

4.5.17 Hover over the now-visible 'Color' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Color' Property's input field, then select 'Create Binding.'

4.5.18 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, expand it, then select 'Color'.

4.5.19 Set the following remaining DropShadowEffect Properties:

Direction	0
BlurRadius	24
ShadowDepth	0

4.5.20 Set the remaining Label_TextBlock Properties:

Margin	16, 16, 0, 8
Vertical Alignment	Bottom
Text Family	Old English Text
Text Size	50

4.6.1 Within the 📘 Add Element Panel (Ctrl+2), use the Search function at the top of the Panel to find the 📘 Star Element.

Once found, click-and-drag an instance to the 📘 Navigator Panel within the Content_Grid 📘 Grid Element.

Then, rename the new 📘 Star Element to Arrow_Star by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

4.6.3 Select Arrow_Star from the 📘 Navigator Panel, then from within its 📘 Properties Panel, hover over the 'Fill' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Fill' Property's input field, then select 'Create Binding'.

4.6.4 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, and select it.

4.6.5 Still remaining within the Arrow_Star 📘 Properties Panel, under the 'Appearance' section, identify the 'Effect' Property, and select 'DropShadowEffect' from its dropdown.

4.6.6 Hover over the now-visible 'Color' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Color' Property's input field, then select 'Create Binding.'

4.6.7 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, expand it, then select 'Color'.

4.6.8 Set the following remaining DropShadowEffect Properties:

Direction	0
BlurRadius	24
ShadowDepth	0

4.6.9 Set the remaining Arrow_Star Properties:

Count	3
Ratio	0.5
Width	28
Height	16
Horizontal Alignment	Right
Vertical Alignment	Top
Stroke	MouseWheel (Press) on the 'Stroke' field to clear the local value.
Layout Transform Rotation Angle	45

We are now done creating our first Button Template!

4.7 Exit the Template Editor by clicking on the ⌂ (Home) icon in the Breadcrumb found in the upper-left hand corner of the 📘 Stage.

We will now apply our new Template to the remaining instances of the 📘 Button Element in the first row.

4.8.1 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 1, Position 2 and from the Templates category of its context menu, within the 'Button' subcategory, select Button_Template_Cyber.

Then, repeat the same operation for the 📘 Button Element in Row 1, Position 3.

This will result in our 'Cyber' Template displaying across the entire first row of our Page.

We will now create our first 📘 Button Element Style.

5. 'Banana' Style Creation

5.1.1 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 1, Position 2, and from the Styles category of its context menu, within the 'Button' subcategory, select 'Create'.

5.1.2 In the window that pops up directly after selecting 'Create', under the 'Name' field, input Button_Style_Banana.

Then, under the 'Create in' field, select 'Global Resources' from the dropdown menu.

Lastly, select 'Accept' to finalize the creation of our new 'Banana' Style and to save it to the Project's 🗋 GlobalResources.xaml Resource Dictionary.

Creating a new Style through this method will automatically apply it, and open it in an isolated Style view (orange 📑 Stage Border), from where we can access and completely customize the Properties that make up the Style.

5.2 With the Style open in the orange-bordered Style Editor, set the following Properties in the 📘 Properties Panel:

Horizontal Content Alignment	Left
Foreground	#FFEBAB00

And just like that, our Button Template has now been Styled to our intention!

Whilst we're already within the Style, we will also configure, ahead of time, the additional Style Properties we'll be using in our second upcoming 'Jungle' Template.

These will not yet be visible on our current 'Cyber' Template, as these additional Properties are unused so far. However, setting them up ahead of time will make them immediately display throughout the configuration of our next Template.

5.3 Set the following additional Properties within the Style's 📘 Properties Panel:

Background	#FF70A503
Border Thickness	16, 0, 0, 0

5.3 Exit the Style Editor by clicking on the ⌂ (Home) icon in the Breadcrumb found in the upper-left hand corner of the 📘 Stage.

We will now create our second 📘 Button Element Style.

6. 'Apple' Style Creation

6.1.1 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 1, Position 3, and from the Styles category of its context menu, within the 'Button' subcategory, select 'Create'.

6.1.2 In the window that pops up directly after selecting 'Create', under the 'Name' field, input Button_Style_Apple.

Then, under the 'Create in' field, select 'Global Resources' from the dropdown menu.

Lastly, select 'Accept' to finalize the creation of our new 'Apple' Style and to save it to the Project's 🗋 GlobalResources.xaml Resource Dictionary.

6.2 With the Style open in the orange-bordered Style Editor, set the following Properties in the 📘 Properties Panel:

Foreground

#FF8F1C1A

We now have an 'Apple' Style ready to complement our 'Banana' Style!

6.3 Exit the Style Editor by clicking on the ⌂ (Home) icon in the Breadcrumb found in the upper-left hand corner of the 📘 Stage.

We will now create our second 'Jungle' 📘 Button Element Template.

7. 'Jungle' Template Creation

7.1.1 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 2, Position 2, and from the Templates category of its context menu, within the 'Button' subcategory, select 'Create'.

7.1.2 In the window that pops up directly after selecting 'Create', under the 'Name' field, input Button_Template_Jungle.

Then, under the 'Create in' field, select 'Global Resources' from the dropdown menu.

Lastly, select 'Accept' to finalize the creation of our new 'Cyber' Template and to save it to the Project's 🗋 GlobalResources.xaml Resource Dictionary.

Creating a new Template through this method will automatically open it in an isolated Template view (magenta 📑 Stage Border), from where we can access and completely customize its internal structure.

7.2.3 From the 📘 Navigator Panel, expand all Elements, then delete the 📘 ContentPresenter Element by selecting it, then pressing Del.

7.2.4 Rename the 📘 Border Element to Master_Border by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

7.2.5 Navigate to the 📘 Add Element Panel (Ctrl+2), and use the Search function at the top of the Panel to find the 📘 Grid Element. Once found, click-and-drag an instance to the 📘 Navigator Panel within Master_Border.

Then, rename the new 📘 Grid Element to Content_Grid by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

7.2.7 With the 📘 Add Element Panel (Ctrl+2) still open, use the Search function at the top of the Panel to find the 📘 Border Element. Once found, click-and-drag three instances to the 📘 Navigator Panel within the Content_Grid.

One of these will contain the Style's key color, one will feature the chosen semi-transparent pattern or texture prepared for this exercise, and one will serve as the container for the Button's text content.

With that in mind, from top to bottom in the 📘 Navigator Panel list, then, rename the newly-introduced 📘 Border Element instances to BackgroundColor_Border, BackgroundPattern_Border, and Label_Border respectively by double-clicking on their names, and inputting their new names.

7.2.8 With the 📘 Add Element Panel (Ctrl+2) still open, use the Search function at the top of the Panel to find the 📘 TextBlock Element.

Once found, click-and-drag an instance to the 📘 Navigator Panel within Label_Border.

Then, rename the new 📘 TextBlock Element to Label_TextBlock by double-clicking on its name in the 📘 Navigator Panel, and inputting its new name.

We will now configure each introduced Element.

7.3.1 Select Master_Border from the 📘 Navigator Panel, then from within its 📘 Properties Panel, set the following Properties:

Width	400
Margin	32, 32, 32, 32
Horizontal Alignment	Center
Vertical Alignment	Center
Padding	MouseWheel (Press) on the 'Padding' field group to clear the pre-configured Binding.
Background	MouseWheel (Press) on the 'Background' field to clear the local value.
Corner Radius	MouseWheel (Press) on the 'Corner Radius' field to clear the local values.
Layout Transform Skew Angle X	-16

7.3.2 With Master_Border still selected, from within its 📘 Properties Panel, hover over the 'Border' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Border' Property's input field, then select 'Create Binding'.

7.3.3 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, and select it.

7.3.4 Still remaining within the Master_Border 📘 Properties Panel, hover over the 'Border Thickness' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Border Thickness' Property's input field, then select 'Create Binding'.

7.3.5 Then, from its Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'BorderThickness' entry in the list, and select it.

7.3.6 Still remaining within the Master_Border 📘 Properties Panel, under the 'Appearance' section, identify the 'Effect' Property, and select 'DropShadowEffect' from its dropdown.

7.3.7 With the DropShadowEffect selected, set the following DropShadowEffect Properties:

Direction	220
BlurRadius	0
ShadowDepth	8

7.3.8 Select BackgroundColor_Border from the 📘 Navigator Panel, then from within its 📘 Properties Panel, hover over the 'Background' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Background' Property's input field, then select 'Create Binding'.

7.3.8 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Background' entry in the list, and select it.

7.3.9 Select BackgroundPattern_Border from the 📘 Navigator Panel, then from within its 📘 Properties Panel, under the 'Background' Property, click on the Property's swatch to open the Brush Picker.

Then, from within the Brush Picker, select the 'Image Brush' tab, and under the 'ImageSource' Property, find and select the 512x512 semi-transparent pattern or texture prepared for the Project.

Lastly, set the 'Stretch' Property to 'UniformToFill' to have the image proportionally fill the space available.

7.3.10 Select Label_Border from the 📘 Navigator Panel, from within its 📘 Properties Panel, hover over the 'Horizontal Alignment' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Horizontal Alignment' Property's input field, then select 'Create Binding'.

7.3.11 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'HorizontalContentAlignment' entry in the list, and select it.

7.3.12 Select Label_TextBlock from the 📘 Navigator Panel, then from within its 📘 Properties Panel, hover over the 'Text' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Text' Property's input field, then select 'Create Binding'.

7.3.13 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Content' entry in the list, and select it.

In this Template, we will make it so that no matter what text is relayed to the Button's 'Content' field, it will always be displayed in all uppercase:

7.3.14 Click on the expander directly under the Binding, and under the 'Converter' Property, select 'CaseConverter'. Then, from the 'Format' dropdown, select 'UpperCase'.

7.3.15 With Label_TextBlock still selected in the 📘 Navigator Panel, from within its 📘 Properties Panel, hover over the 'Foreground' Property, click on the ⋮ (3-Dot) menu icon directly to the right of the 'Foreground' Property's input field, then select 'Create Binding'.

7.3.16 From the Binding selection menu, under the 'Relative' tab, set 'TemplatedParent' as the 'Relative Mode', then click the button directly to the right of the 'Path' input field, identify the 'Foreground' entry in the list, and select it.

7.3.17 Select BackgroundColor_Border, and set the following remaining Properties within the 📘 Properties Panel:

Border	MouseWheel (Press) on the 'Border' field to clear the local value.
Border Thickness	MouseWheel (Press) on the 'Border Thickness' field group to clear the local value.

7.3.18 Select BackgroundPattern_Border, and set the following remaining Properties within the 📘 Properties Panel:

Border	MouseWheel (Press) on the 'Border' field to clear the local value.
Border Thickness	MouseWheel (Press) on the 'Border Thickness' field group to clear the local value.

7.3.19 Select Label_Border, and set the following remaining Properties within the 📘 Properties Panel:

Margin	24, 24, 24, 24
Background	#FF000000
Border	MouseWheel (Press) on the 'Border' field to clear the local value.
Border Thickness	MouseWheel (Press) on the 'Border Thickness' field group to clear the local value.

7.3.20 Select Label_TextBlock, and set the following remaining Properties within the 📘 Properties Panel:

Margin	5, 5, -3, -3
Text Family	Berlin Sans FB
Text Size	48
Text Weight	DemiBold

7.4.1 Exit the Template Editor by clicking on the ⌂ (Home) icon in the Breadcrumb found in the upper-left hand corner of the 📘 Stage.

7.4.2 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 2, Position 1 and from the Templates category of its context menu, within the 'Button' subcategory, select Button_Template_Jungle.

Then, repeat the same operation for the 📘 Button Element in Row 2, Position 3.

This will result in our 'Jungle' Template displaying across our entire second row of our Page.

We will now adjust our 📘 Button Element Styles to work across both of our Templates, without compromising any of the currently-existing presentation of the 'Cyber' Buttons Styled in both the 'Banana' and 'Apple' variants.

8. Style Finalization

8.1 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 2, Position 2 and from the Styles category of its context menu, within the 'Button' subcategory, select Button_Style_Banana.

Then, from the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 2, Position 3 and from the Styles category of its context menu, within the 'Button' subcategory, select Button_Style_Apple.

Although our Styles have seamlessy applied to our newest 'Jungle' Templates, we can also see that our 'Apple' Style is missing some of the stylization present in our original mockup.

In particular, we can observe that it is missing the beige color intended as the background of this specific Template, in this specific Style.

We can immediately address by making some adjustments to this Style to bring it in-line with our visual target.

8.2.1 From the 📑 Stage or from the 📘 Navigator Panel right-click on the 📘 Button Element in Row 2, Position 3 and from the Styles category of its context menu, within the 'Button' subcategory, select 'Edit Current'.

This will open the Style in an isolated Style view (orange 📑 Stage Border), from where we can customize it further.

8.2.2 Set the following additional Property within the Style's 📘 Properties Panel:

Background

#FFA8AD9B

8.3 Exit the Style Editor by clicking on the ⌂ (Home) icon in the Breadcrumb found in the upper-left hand corner of the 📘 Stage.

All of our 📘 Button Element Templates and Styles are now created, and we can now proceed to explore the power and ease-of-employment of what we've created.

9. Testing and Validation

From the 📘 Add Element Panel (Ctrl+2), use the Search function to find the 📘 Button Element. Once found, click-and-drag one additional instance into the vertical StackPanel currently containing both rows of Buttons. This will create a third row containing a single 📘 Button Element.

Then, from the 📑 Stage or from the 📘 Navigator Panel right-click on the newly-introduced 📘 Button Element and experiment creating combinations of the Templates available from the Templates category, mixed alongside the Styles available from the Styles category.

Congratulations! We have successfully created a Template and Style driven system in which multiple Templates, and multiple Styles are able to seamlessly change the entire presentation of the built-in 📘 Button Element.

The beauty of this system, is that both the Templates and the Styles can be edited at any time, and any changes made will update across all instances where they are used. Making changes to either Templates or Styles can be performed inline via as done throughout this exercise. Alternately, they can also be centrally modified by opening the Template or Style Resources for edit via the 📘 Resources Panel Ctrl (Hold) + 5.

It is also worth noting that although we didn't cover this technique in this exercise, Templates can also be included as a Style's Property. This means that if a Template is set as part of a Style, changing Styles can be used to trigger a change in Template alongside it. Including a Template as part of a Style can be achieved by editing the 'Templating' Properties found within any Style's 📘 Properties Panel, in a similar method to the we used to set the myriad of other Style Properties.

All of the above methods can be used to completely reskin the individual parts that make up an interface, all without any impact to the underlying functionality offered by the suite of offered 📘 Interface Elements.