An Introduction to Styles and Templates in Windows Presentation Foundation (WPF)
Adam Calderon – C# MVP Principal Engineer Interknowlogy
What We Will Cover
What Styles are and how to use them How Triggers can be used to replace common UI behavior How Templates can be used to skin controls How all of this comes together
Session Prerequisites
General Understanding of XML and XAML Basic knowledge of Microsoft® Windows® Presentation Foundation (WPF) Basic knowledge of WPF Resources
Level 200
Agenda
Styles Triggers Templates Adding Style to an existing application
Styles
Overview of Styles
What are styles? Problems they address Elements that support styles
Styles
Style Class Properties
Key TargetType Setters
Property Event
Resources Triggers
Code Example of a Style
Some Text
Styles
Extending Styles
Order of Precedence BasedOn Property
Style-based Element-based
Demonstration One
Styles in Action
Agenda
Styles Triggers Templates Adding Style to an existing application
Triggers
Overview of Triggers
Sets properties in response to end-user actions No code solution to code-based remedies of today
Triggers
Basics of Triggers
Property set must be a dependency property Properties reset when trigger dependent property changes back Supports single trigger entries and multiple trigger entries (composite trigger) Supports triggers that are dependent upon data binding and not just standard property binding
Demonstration Two
Triggers in Action
Agenda
Styles Triggers Templates Adding Style to an existing application
Templates
Overview of Templates
Defines visual appearance of controls Out-of-box controls get their visual appearance from Templates Brings together styles and triggers
Templates
Basics of Templates
Three types of templates:
ControlTemplate ItemsPanelTemplate DataTemplate
TemplateBinding links template and control properties ContentPresenter can be used to display controls content
Demonstration Three
Templates in Action
Agenda
Styles Triggers Templates Adding Style to an existing application
Adding Style to an Application
Steps
1.
2.
3.
4.
Use Style Setters to change the appearance of the text blocks Use Control Templates to redefine the visual tree of a control Use Data Templates to determine how the data appears Use Triggers to create dynamic user interface (UI)
Demonstration Four
Transforming an Existing Application
Session Summary
Styles are powerful and flexible Triggers eliminate user interaction-based UI coding Controls are more about behavior Control Templates modify visual aspects of controls
For More Information
MSDN® Links
Microsoft Windows® Vista™ development center: http://msdn.microsoft.com/windowsvista/ Microsoft .NET Framework 3.0 for developers: http://msdn.microsoft.com/winfx/ Windows Presentation Foundation code-named "Avalon:” http://forums.microsoft.com/MSDN/ShowForum.aspx ?ForumID=119&SiteID=1
Other Links
Microsoft .NET Framework: http://www.netfx3.com/
Additional Resources
Applications = Code + Markup
By Charles Petzold, Microsoft Press®
Adam Calderon
More info on InterKnowlogy: www.InterKnowlogy.com Contact Information E-mail: adamc@InterKnowlogy.com Phone: 760-930-0075 x274 Blog: http://blogs.InterKnowlogy.com/AdamCalderon About Adam Calderon Microsoft MVP – C# Microsoft UI Server Frameworks Advisory Council Developer / Author / Speaker
Questions and Answers
Submit text questions using the “Ask” button. Don’t forget to fill out the survey. For upcoming and previously live webcasts:
www.microsoft.com/webcasts
Got webcast content ideas? Contact us at:
http://go.microsoft.com/fwlink/?LinkId=41781
Today's webcast was presented using Microsoft® Office Live Meeting. Get a free 14-day trial by visiting: www.microsoft.com/presentlive