WPF Templates and WPF Templates and StylesStyles

ControlTemplate and DataTemplateControlTemplate and DataTemplate

Doncho MinkovDoncho Minkov

Telerik School Telerik School AcademyAcademyhttp://schoolacademy.telerik.com

Technical TrainerTechnical Trainerhttp://www.minkov.it

Table of ContentsTable of Contents Templating in WPFTemplating in WPF

Control TemplateControl Template

Data TemplatingData Templating StylingStyling TriggersTriggers Resource DictionariesResource Dictionaries

Templating in WPFTemplating in WPF

Templating in WPFTemplating in WPF

Two kinds of templates in WPFTwo kinds of templates in WPF ControlTemplateControlTemplate and and DataTemplateDataTemplate

ControlTemplateControlTemplate is used for the is used for the visualization of the control itselfvisualization of the control itself

DataTemplateDataTemplate is used to present the is used to present the content of the controlcontent of the control

Control TemplateControl TemplateHow to Control the Appearance?How to Control the Appearance?

Control TemplatingControl Templating

Controls in WPF are separated into:Controls in WPF are separated into: LogicLogic

Defines the states, events and Defines the states, events and propertiesproperties

TemplateTemplate Defines the visual appearance of the Defines the visual appearance of the

controlcontrol

The wireup between the logic and The wireup between the logic and the template is done by the template is done by DataBindingDataBinding

Control Templating (2)Control Templating (2) Each control has a default templateEach control has a default template

This gives the control a basic This gives the control a basic appearanceappearance

The default template is typically The default template is typically shipped together with the control and shipped together with the control and available for all common windows available for all common windows themesthemes

It is by convention wrapped into a It is by convention wrapped into a stylestyle Identified by value of the Identified by value of the DefaultStyleKeyDefaultStyleKey property that every property that every control hascontrol has

Control Templating (3)Control Templating (3)

The template is defined by a The template is defined by a dependencydependency propertyproperty called called TemplateTemplate The appearance of a control can be The appearance of a control can be

completely replaced by setting this completely replaced by setting this to another instanceto another instance

The The ControlTemplateControlTemplate is often is often included in a style that contains included in a style that contains other property settingsother property settings

Control Template Control Template ExampleExample

ContentPresenterContentPresenter presents the presents the ContentContent of the Control of the Control

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

……

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

Control Control TemplateTemplate

Live DemoLive Demo

Data TemplatingData Templating

Data TemplateData Template DataTemplatesDataTemplates are a similar concept are a similar concept

as as ControlTemplateControlTemplate Give you a very flexible and Give you a very flexible and

powerful way to replace the visual powerful way to replace the visual appearance of a data itemappearance of a data item

Controls like Controls like ListBoxListBox, , ComboBoxComboBox or or ListViewListView

If you don't specify a data templateIf you don't specify a data template WPF takes the default template WPF takes the default template

that is just a that is just a TextBlockTextBlock

Data Template (2)Data Template (2) If you bind complex objects to the If you bind complex objects to the

control, it just calls control, it just calls ToString()ToString() on on itit Within a Within a DataTemplateDataTemplate, the , the DataContextDataContext is set to the data objectis set to the data object

So you can easily bind to the data So you can easily bind to the data context to display various members context to display various members of your data objectof your data object

Data TemplateExample Data TemplateExample Without a Without a DataTemplateDataTemplate you just you just

see the result of calling see the result of calling ToString()ToString() on the object. on the object. With the data template we see the With the data template we see the

name of the property and a name of the property and a TextBoxTextBox that even allows us to edit the that even allows us to edit the valuevalue

<DataTemplate><DataTemplate> <Border BorderBrush="DarkBlue" CornerRadius="5"><Border BorderBrush="DarkBlue" CornerRadius="5"> <StackPanel Orientation="Horizontal"><StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}"/><TextBlock Text="{Binding Name}"/> <TextBlock Text="{Binding Age}"/><TextBlock Text="{Binding Age}"/> </StackPanel></StackPanel> </Border></Border></DataTemplate></DataTemplate>

Data Data TemplatingTemplating

Live DemoLive Demo

StylingStylingLets Make it Shiny!Lets Make it Shiny!

What is a Style?What is a Style? StyleStyle is a collection of property values is a collection of property values

that you can apply to an element in one that you can apply to an element in one stepstep

Very similar to Very similar to CSSCSS standard in HTMLstandard in HTML WPF styles allow you to define a common WPF styles allow you to define a common

set of formatting characteristicsset of formatting characteristics WPF styles limitationsWPF styles limitations

You can't share styles between different You can't share styles between different elementselements

Each element can inherit just one Each element can inherit just one StyleStyle At least you can't do it the standard wayAt least you can't do it the standard way

Defining a StyleDefining a Style

Defining a Defining a StyleStyle for a for a ButtonButton ControlControl

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

External Style fileExternal Style file

18

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

Applying StyleApplying Style

Make a Make a ButtonButton ControlControl and set the and set the Style PropertyStyle Property

StyleStyle can be defined in can be defined in Window.ResourcesWindow.Resources::

19

<Button Style="{StaticResource BigButtonStyle}"<Button Style="{StaticResource BigButtonStyle}"x:Name="BigButtonExample" Content = "This is BIG!" />x:Name="BigButtonExample" Content = "This is BIG!" />

<Window.Resources><Window.Resources> <Style x:Key="BigButtonStyle" <Style x:Key="BigButtonStyle" TargetType="Button">TargetType="Button"> <Setter Property="FontFamily" <Setter Property="FontFamily" Value="Georgia"/> Value="Georgia"/> <Setter Property="FontSize" Value="40"/> <Setter Property="FontSize" Value="40"/> <Setter Property="Padding" Value="20"/> <Setter Property="Padding" Value="20"/> </Style></Style></Window.Resources></Window.Resources>

Key Key

propertyproperty

The target The target

controlcontrol

The property we are The property we are

overridingoverridingThe new valueThe new value

Styling ControlStyling Control

There are 2 ways to customize a There are 2 ways to customize a controlcontrol For example: For example: CircledButtonCircledButton

Using Using StylesStyles

Using Using TemplatesTemplates

In both you have to override the In both you have to override the ControlTemplateControlTemplate May lose some of the functionality May lose some of the functionality

of the controlof the control

20

Styled Control Using Styled Control Using StyleStyle

21

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

WPF WPF StylingStyling

Live Live DemoDemo

22

TriggersTriggersDynamic StylesDynamic Styles

TriggersTriggers TriggersTriggers define a list of setters that define a list of setters that

are executed if the specified are executed if the specified condition is fulfilledcondition is fulfilled PropertyProperty TriggersTriggers

When a property gets a specified valueWhen a property gets a specified value

EventEvent Triggers Triggers When a specified event is firedWhen a specified event is fired

DataData TriggersTriggers When a binding expression reaches a When a binding expression reaches a

specified valuespecified value24

Triggers ExampleTriggers Example

25

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

of the affected of the affected elementelement

Which Which element element

the trigger the trigger will affectwill affect

When to When to execute the execute the

triggertrigger

TriggersTriggersLive DemoLive Demo

Resource Resource DictionariesDictionariesExternal ResourcesExternal Resources

Resource DictionariesResource Dictionaries To avoid the length of code in one To avoid the length of code in one

place, a place, a ResourceDictionaryResourceDictionary can be can be usedused Similar to the CSS external style filesSimilar to the CSS external style files Add new Add new ResourceDictionaryResourceDictionary to your to your

Project and put the Project and put the StyleStyle / / TemplateTemplate code insidecode inside

To access the To access the StylesStyles, , TemplatesTemplates inside the inside the ResourceDictionaryResourceDictionary::

28

<Window.Resources><Window.Resources> <ResourceDictionary><ResourceDictionary> <ResourceDictionary.MergedDictionaries><ResourceDictionary.MergedDictionaries> <ResourceDictionary Source=<ResourceDictionary Source= "Resources\CircledButtonDictionary.xaml"/>"Resources\CircledButtonDictionary.xaml"/> </ResourceDictionary.MergedDictionaries></ResourceDictionary.MergedDictionaries> </ResourceDictionary></ResourceDictionary></Window.Resources></Window.Resources>

Resource Resource DictionariesDictionaries

Live DemoLive Demo

QuestionsQuestions??

WPF Templates and WPF Templates and StylesStyles