WPF Templates and Styles

ControlTemplate and DataTemplate

Doncho Minkov

Telerik School Academyhttp://schoolacademy.telerik.com

Technical Trainerhttp://www.minkov.it

http://schoolacademy.telerik.com

Table of Contents Templating in WPF

Control Template

Data Templating Styling Triggers Resource Dictionaries

Templating in WPF

Templating in WPF

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

Control TemplateHow to Control the Appearance?

Control Templating

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

Control Templating (2) 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

Control Templating (3) 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

Control Template Example

ContentPresenter presents the Content of the Control

<ControlTemplate TargetType="Button" x:Key="EllipseButton"> <Grid> <Ellipse Fill="Pink" Stroke="Red" Opacity="0.5"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid></ControlTemplate>

…

<Button Content="Click" Template="{StaticResource EllipseButton}" />

Control Template

Live Demo

Data Templating

Data Template 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

Data Template (2) 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

Data TemplateExample 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> <Border BorderBrush="DarkBlue" CornerRadius="5"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}"/> <TextBlock Text="{Binding Age}"/> </StackPanel> </Border></DataTemplate>

Data Templating

Live Demo

StylingLets Make it Shiny!

What is a Style? 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 Defining a Style for a Button Control

Inline in the <Control.Style> <Window.Resources> External Style file

18

<Button Content="This is Also BIG"> <Button.Style> <Style> <Setter Property="FontFamily" Value="Georgia"/> <Setter Property="FontSize" Value="40"/> </Style> </Button.Style></Button>

Applying Style 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> <Style x:Key="BigButtonStyle" TargetType="Button"> <Setter Property="FontFamily" Value="Georgia"/> <Setter Property="FontSize" Value="40"/> <Setter Property="Padding" Value="20"/> </Style></Window.Resources>

Key

property

The target

control

The property we are

overriding

The new value

Styling Control 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

Styled Control Using Style

21

<Style x:Key="ButtonStyleColorful" TargetType="Button"> … <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Ellipse Stroke="Black" StrokeThickness="5" Fill="Blue"/> <TextBlock Foreground="Silver" Background="Transparent" Text="With Style"/> </ControlTemplate> </Setter.Value> </Setter></Style>

WPF Styling

Live Demo

22

TriggersDynamic Styles

Triggers 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

Triggers Example

25

<ControlTemplate> <Ellipse x:Name="Circle" Width="20" Height="20" Fill="Blue"/> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Circle" Property="Fill" Value="Red"/> </Trigger> </ControlTemplate.Triggers></Controltemplate> The Property

of the affected element

Which element

the trigger will affect

When to execute the

trigger

TriggersLive Demo

Resource DictionariesExternal Resources

Resource Dictionaries 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> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source= "Resources\CircledButtonDictionary.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary></Window.Resources>

Resource Dictionaries

Live Demo

Questions?

WPF Templates and Styles