Your SlideShare is downloading. ×
4. XAML & WPF - WPF Templating-and-Styling
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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


Published on

WPF Templates and Styles …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. WPF Templates and Styles ControlTemplate and DataTemplateDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik Software
  • 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 TemplateHow 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 wireup between 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 DefaultStyleKey property that every control has
  • 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. 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. Control Template Live Demo
  • 11. Data Templating
  • 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. 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. 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. StylingLets Make it Shiny!
  • 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. 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. 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. 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. 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. WPF Styling Live Demo
  • 23. TriggersDynamic Styles
  • 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. 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. Triggers Live Demo
  • 27. ResourceDictionariesExternal Resources
  • 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. Resource Dictionaries Live Demo
  • 30. WPF Templates and Styles курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET програмиране за деца – безплатни курсове и уроци 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. Free Trainings @ Telerik Academy Desktop Applications with C# and WPF  Telerik Software Academy  Telerik Academy @ Facebook  Telerik Software Academy Forums 