ControlTemplate and DataTemplate Doncho Minkov Telerik School Academy Technical Trainer

 Templating in WPF  Control Template  Data Templating  Styling  Triggers  Resource Dictionaries

 Two kinds of templates in WPF  ControlTemplate and DataTemplate  ControlTemplate is used for the visualization of the control itself  DataTemplate is used to present the content of the control

How to Control the Appearance?

 Controls in WPF are separated into:  Logic  Defines the states, events and properties  Template  Defines the visual appearance of the control  The wireup between the logic and the template is done by DataBinding

 Each control has a default template  This gives the control a basic appearance  The default template is typically shipped together with the control and available for all common windows themes  It is by convention wrapped into a style  Identified by value of the DefaultStyleKey property that every control has

 The template is defined by a dependency property called Template  The appearance of a control can be completely replaced by setting this to another instance  The ControlTemplate is often included in a style that contains other property settings

 ContentPresenter presents the Content of the Control <ControlTemplate TargetType="Button" x:Key="EllipseButton"> x:Key="EllipseButton"> <ContentPresenter HorizontalAlignment="Center" <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> VerticalAlignment="Center"/> </ControlTemplate>… <Button Content="Click" Template="{StaticResource EllipseButton}" /> Template="{StaticResource EllipseButton}" />

Live Demo

 DataTemplates are a similar concept as ControlTemplate  Give you a very flexible and powerful way to replace the visual appearance of a data item  Controls like ListBox, ComboBox or ListView  If you don't specify a data template  WPF takes the default template that is just a TextBlock

 If you bind complex objects to the control, it just calls ToString() on it  Within a DataTemplate, the DataContext is set to the data object  So you can easily bind to the data context to display various members of your data object

 Without a DataTemplate you just see the result of calling ToString() on the object.  With the data template we see the name of the property and a TextBox that even allows us to edit the value <DataTemplate> </DataTemplate>

Live Demo

Lets Make it Shiny!

 Style is a collection of property values that you can apply to an element in one step  Very similar to CSS standard in HTML  WPF styles allow you to define a common set of formatting characteristics  WPF styles limitations  You can't share styles between different elements  Each element can inherit just one Style  At least you can't do it the standard way

 Defining a Style for a Button Control  Inline in the  Inline in the    External Style file 18 </Button>

 Make a Button Control and set the Style Property  Style can be defined in Window.Resources : 19 <Button Style="{StaticResource BigButtonStyle}" x:Name="BigButtonExample" Content = "This is BIG!" /> <Window.Resources> </Window.Resources> Key property The target control The property we are overriding The new value

 There are 2 ways to customize a control  For example: CircledButton  Using Styles  Using Templates  In both you have to override the ControlTemplate  May lose some of the functionality of the control 20

21 … <Ellipse Stroke="Black" <Ellipse Stroke="Black" StrokeThickness="5" Fill="Blue"/> StrokeThickness="5" Fill="Blue"/> <TextBlock Foreground="Silver" <TextBlock Foreground="Silver" Background="Transparent" Text="With Style"/> Background="Transparent" Text="With Style"/> </Style>

Live Demo 22

Dynamic Styles

 Triggers define a list of setters that are executed if the specified condition is fulfilled  Property Triggers  When a property gets a specified value  Event Triggers  When a specified event is fired  Data Triggers  When a binding expression reaches a specified value 24

25 <ControlTemplate> <Ellipse x:Name="Circle" <Ellipse x:Name="Circle" Width="20" Height="20" Width="20" Height="20" Fill="Blue"/> Fill="Blue"/> <Trigger Property="IsMouseOver" <Trigger Property="IsMouseOver" Value="True"> Value="True"> <Setter TargetName="Circle" <Setter TargetName="Circle" Property="Fill" Value="Red"/> Property="Fill" Value="Red"/> </Controltemplate> The Property of the affected element Which element the trigger will affect When to execute the trigger

Live Demo

External Resources

 To avoid the length of code in one place, a ResourceDictionary can be used  Similar to the CSS external style files  Add new ResourceDictionary to your Project and put the Style / Template code inside  To access the Styles, Templates inside the ResourceDictionary : 28 <Window.Resources> <ResourceDictionary Source= <ResourceDictionary Source= "Resources\CircledButtonDictionary.xaml"/> "Resources\CircledButtonDictionary.xaml"/> </Window.Resources>

Live Demo

Questions?