4. xaml & wpf - wpf templating-and-styling
DESCRIPTION
WPF Templates and StylesTelerik Software Academy: http://academy.telerik.com/school-academy/meetings/details/2012/02/02/desktop-applications-csharp-wpfThe website and all video materials are in Bulgarian.Templating in WPFControl TemplateData TemplatingStylingTriggersResource DictionariesTRANSCRIPT
Doncho Minkov
Telerik Software Academyacademy.telerik.com
Technical Trainerhttp://www.minkov.it
http://academy.telerik.com/
WPF Templates and Styles
ControlTemplate and DataTemplate
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
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?http://academy.telerik.com
WPF Templates and Styles
Free Trainings @ Telerik Academy
Desktop Applications with C# and WPF academy.telerik.com/
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com