1 / 30

WPF Templates and Styles

http://schoolacademy.telerik.com. WPF Templates and Styles. ControlTemplate and DataTemplate. Doncho Minkov. Telerik School Academy. http://schoolacademy.telerik.com. Technical Trainer. http://www.minkov.it. Table of Contents. Templating in WPF Control Template Data Templating

luella
Download Presentation

WPF Templates and Styles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. http://schoolacademy.telerik.com WPF Templates and Styles ControlTemplate and DataTemplate Doncho Minkov Telerik School Academy http://schoolacademy.telerik.com Technical Trainer http://www.minkov.it

  2. Table of Contents • Templating in WPF • Control Template • Data Templating • Styling • Triggers • Resource Dictionaries

  3. Templating in WPF

  4. 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

  5. Control Template How to Control the Appearance?

  6. Control Templating • Controls in WPF are separated into: • Logic • Defines the states, events and properties • Template • Defines the visual appearance of the control • The wireupbetween the logic and the template is done by DataBinding

  7. 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 DefaultStyleKeyproperty that every control has

  8. Control Templating (3) • The template is defined by a dependencyproperty called Template • The appearance of a control can be completely replaced by setting this to another instance • The ControlTemplateis often included in a style that contains other property settings

  9. Control Template Example • ContentPresenterpresents 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="{StaticResourceEllipseButton}" />

  10. Control Template Live Demo

  11. Data Templating

  12. Data Template • DataTemplatesare 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, ComboBoxor ListView • If you don't specify a data template • WPF takes the default template that is just a TextBlock

  13. Data Template (2) • If you bind complex objects to the control, it just calls ToString()on it • Within a DataTemplate, the DataContextis set to the data object • So you can easily bind to the data context to display various members of your data object

  14. 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>

  15. Data Templating Live Demo

  16. Styling Lets Make it Shiny!

  17. What is a Style? • Styleis a collection of property values that you can apply to an element in one step • Very similar to CSSstandard 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

  18. Defining a Style • Defining a Stylefor a ButtonControl • Inline in the <Control.Style> • <Window.Resources> • External Style file <Button Content="This is Also BIG"> <Button.Style> <Style> <Setter Property="FontFamily" Value="Georgia"/> <Setter Property="FontSize" Value="40"/> </Style> </Button.Style> </Button>

  19. Applying Style • Make a ButtonControland set the Style Property • Stylecan be defined in Window.Resources: <Button Style="{StaticResource BigButtonStyle}" x:Name="BigButtonExample" Content = "This is BIG!" /> The target control Key property <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> The property we are overriding The new value

  20. 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

  21. Styled Control Using Style <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>

  22. WPF Styling Live Demo

  23. Triggers Dynamic Styles

  24. Triggers • Triggers define a list of setters that are executed if the specified condition is fulfilled • PropertyTriggers • When a property gets a specified value • EventTriggers • When a specified event is fired • DataTriggers • When a binding expression reaches a specified value

  25. Triggers Example <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> When to execute the trigger Which element the trigger will affect The Property of the affected element

  26. Triggers Live Demo

  27. Resource Dictionaries External Resources

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

  29. Resource Dictionaries Live Demo

  30. WPF Templates and Styles

More Related