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

  • View

  • Download

Embed Size (px)


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 Dictionaries

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

  • 1. WPF Templates and Styles ControlTemplate and DataTemplateDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik Software Academyacademy.telerik.com

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 templateis 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 shippedtogether with the control and available for allcommon 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 theControl 10. Control Template Live Demo 11. Data Templating 12. Data Template DataTemplates are a similarconcept as ControlTemplate Give you a very flexible and powerful way toreplace 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 aTextBlock 13. Data Template (2) If you bind complex objects to the control, it just calls ToString() on it Within a DataTemplate, the DataContext isset 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 15. Data TemplatingLive 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 offormatting characteristics WPF styles limitations You cant share styles between differentelements 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 External Style file18 19. Applying Style Make a Button Control and set the Style Property Style can be defined in Window.Resources: Key property The target control The property we are overriding The new value19 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 thecontrol 20 21. Styled Control Using Style21 22. WPF StylingLive 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 specifiedvalue24 25. Triggers Example Which element the trigger will The Property of theaffected element25 26. Triggers Live Demo 27. ResourceDictionariesExternal Resources 28. Resource Dictionaries To avoid the length of code in one place, aResourceDictionary can be used Similar to the CSS external style files Add new ResourceDictionary to your Projectand put the Style / Template code inside To access the Styles, Templates inside theResourceDictionary: 28 29. Resource Dictionaries Live Demo 30. WPF Templates and Styles , BG Coder - - online judge , ASP.NET - , , C#, .NET, ASP.NEThttp://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. 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