4. XAML & WPF - WPF Templating-and-Styling


Published on

WPF Templates and Styles
Telerik Software Academy:
The website and all video materials are in Bulgarian.

Templating in WPF
Control Template
Data Templating
Resource Dictionaries

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

4. XAML & WPF - WPF Templating-and-Styling

  1. 1. WPF Templates and Styles ControlTemplate and DataTemplateDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik Software Academyacademy.telerik.com
  2. 2. Table of Contents Templating in WPF  Control Template  Data Templating Styling Triggers Resource Dictionaries
  3. 3. Templating in WPF
  4. 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. 5. Control TemplateHow to Control the Appearance?
  6. 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 wireup between the logic and the template is done by DataBinding
  7. 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 DefaultStyleKey property that every control has
  8. 8. 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
  9. 9. 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}" />
  10. 10. Control Template Live Demo
  11. 11. Data Templating
  12. 12. 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 dont specify a data template  WPF takes the default template that is just a TextBlock
  13. 13. 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
  14. 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. 15. Data Templating Live Demo
  16. 16. StylingLets Make it Shiny!
  17. 17. 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 cant share styles between different elements  Each element can inherit just one Style  At least you cant do it the standard way
  18. 18. Defining a Style Defining a Style for a Button Control  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> 18
  19. 19. Applying Style Make a Button Control and set the Style Property <Button Style="{StaticResource BigButtonStyle}" x:Name="BigButtonExample" Content = "This is BIG!" /> Style can be defined in Window.Resources: Key property The target control <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 19
  20. 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 20
  21. 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> 21
  22. 22. WPF Styling Live Demo
  23. 23. TriggersDynamic Styles
  24. 24. 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
  25. 25. Triggers Example<ControlTemplate> <Ellipse x:Name="Circle" When to execute Width="20" Height="20" the trigger Fill="Blue"/> <ControlTemplate.Triggers> Which element <Trigger Property="IsMouseOver" Value="True"> the trigger will <Setter TargetName="Circle" affect Property="Fill" Value="Red"/> </Trigger> </ControlTemplate.Triggers></Controltemplate> The Property of the affected element 25
  26. 26. Triggers Live Demo
  27. 27. ResourceDictionariesExternal Resources
  28. 28. 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: <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source= "ResourcesCircledButtonDictionary.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> 28
  29. 29. Resource Dictionaries Live Demo
  30. 30. WPF Templates and Styles курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  31. 31. 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