Upload
doncho-minkov
View
752
Download
1
Tags:
Embed Size (px)
Citation preview
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