Windows Phone - Template (13)

Hello

Two types of templates :

• DataTemplate - Render objects that have no visual representation
• ControlTemplate - Customize visual appearance of controls

ContentControl , ContentTemplate and  DataTemplate
DataTemplate - Render objects that have no visual representation
ContentTemplate is the way to display Content.

Sample source
Templates_NK.zip

We have seen before (blog) how to set content for a button (ContentControl). Now i will use ContenetTemplate which is a property of ContentControl type DataTemplate.
Content is set to an object type CUser and it is the button DataContext i.e. Binding source. Given a source there is no need to define it for the two TextBlocks and only Path is left to be defined. for Binding.
The Button content is displayed by two TextBlocks as defined in ContentTemplate

Note that Path may be omitted from the Binding i.e

Run the application and click the "Data Template" button to produce :

ControlTemplate
ControlTemplate - customize visual appearance of controls

Every Control has a property name Template which is type ControlTemplate.
Template is common as part of Style.
Note that ControlTemplate changes the appearance of the control but not it's functionality.

Source sample
Templates_NK.zip

ControlTemplate.xaml

A button with ControlTemplate which includes Border andTextBlock

A button with ControlTemplate which includes Border andTextBlock using TemplateBinding
which means a binding between the ControlTemplate property and the templated control property. i.e. the boder BorderBrush property is binded to the Control BorderBrush, same goes for BorderThickness
Note that i used once TemplateBinding and once Binding with RelativeSource. However, they are equivalence.

Same as the first button but using style

Based on previous button but two changes :

• Add corner to the Border
• Add ContentPresenter and bind it to the Control Content so "Click Me" will appear. This solve the problem that the Content "Click Me" was not shown

Now i want to show the use of ControlTemplate and Style as resources so we can reuse them.

Three resources are defined :

• templateButtonComplete - ControlTemplate for button with Border which defines BorderBrush,BorderThickness and CornerRadius and ContenetPresenter which is binded to it's control content
• templateButtonBinded - similar to  templateButtonComplete but bind  BorderBrush and  BorderThickness to it's parent button. Is it possible to bind also CornerRadius ?
• styleButton - style add property such as HorizontalAlignment,Margin and use templatedButtonBinded. Note that the style set BorderBrush and BorderThickness which will be used by the template binding properties

And the buttons use is really easy after the resources are defined :

Run the application and click the "Control Template" button to produce :

Visual State Manager

The VisualStateManager manages states and logic for transitioning between states of controls.

We can use the visual state manager to handle state transitions as part of the ControlTemplate

VisualStateManger has VisualStateGroups which is a collection of VisualStateGroup objects.
VisualStateGroup has two important properties :

• States - a collection of VisualState objects 
• Transitions - collection of VisualTransition objects

VisualState :

• Represent visual state of a control e.g. MouseOver
• Has important property name storyboard which defines the apperance of the control in this state. storyboard is actually the control animation in this state

VisualTransition - represent the visual behavior when transition happens


Source sample
Templates_NK.zip



The sample has a button with ControlTemplate name templateButtonComplete. The template has Border and ContenentPresenter as before. However the template has VisualStateManger which define the behavior of pressing on the button.


VisualStateManager.xaml

Run the application and click the "Visual State Manager" to produce :

Click the button and hold it down, the color of it will change and after you release it will turn back to green.

Sharing Templates and Styles
We already know how to share Style and Template inside the same application. Now it's time to share them cross application.


MergedDictionaries
Basic idea is to put the resources e.g. Styles, Templates in a single xaml file and share this file between projects.

Source sample
Templates_NK.zip


The common resources are defined inside a xaml file called SharedResources.xaml

This file is referenced in App.xaml using MergedDictionaries property

The resources are consumed in TemplateStyleSharing.xaml

Run the application and click the "Template and Style Sharing" to produce :

Nathan