Adding Style to your

WPF and Silverlight

Applications

Chris Koenig
Developer Evangelist
chris.koenig@microsoft.com
http://blogs.msdn.com/chkoenig
Agenda
• Quick overview of WPF / Silverlight / XAML
• PART 1 - Data Binding
• Element to Element Data Binding
• Binding to Objects
• Binding to Collections
• Master-Detail Binding
• Data Binding and the Debugger
• PART 2 - Styles & Templates
• Creating Custom Styles
• Inherited Styles
• “Apply to All” Styles
• Themes
• Creating Control Templates
• Custom Data Templates
• Visual State Manager (if time permits)
Windows Presentation Foundation
 Microsoft
Silverlight
is a

cross-browser
cross-platform
cross-device

implementation of .NET
for building and delivering the next generation of

media experiences
&
rich interactive applications
Silverlight Runtime Requirements
XAML: Declarative Programming for
Windows
Markup for Windows
•

• Build applications in simple declarative statements

• Also used in WF for defining workflows
•Code and content are separate
• Streamline collaboration between designers and developers
•Easy for tools to consume and generate

<Button Width="100">OK Button b1 = new Button(); Dim b1 As New Button

<Button.Background> b1.Content = "OK"; b1.Content = "OK"
LightBlue b1.Background = new b1.Background = New _
</Button.Background> SolidColorBrush SolidColorBrush _
</Button> (Colors.LightBlue); (Colors.LightBlue)
b1.Width = 100; b1.Width = 100
Data Binding

Binding Target Binding Source <StackPanel>

<Label>Select A Customer</Label>
Dependency Object Object <ListBox
Name="myListBox"
OneWay
Dependency Background="HoneyDew"
TwoWay Property ItemsSource=
Property
OneWayToSourc "{Binding {StaticResource mySource}}"
e </ListBox>
</StackPanel>

• UI can be bound to CLR objects or XML

• Dependency properties can also be bound to ADO.NET
and objects associated with Web Services and Web properties
• Sort, filter, and group views can be generated on top of the data
• Data templates can be applied to data
Controls, Templates, Styles &
Resources, Layouts, Animation
Animation, Triggers, Timelines

<StackPanel>
Template <StackPanel.Triggers>
d <EventTrigger RoutedEvent=“Button.Click">
Button <EventTrigger.Actions>
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>

<ColorAnimation To="Yellow" Duration="0:0:0.5“

UI Services Storyboard.TargetName="TheBrush"
Storyboard.TargetProperty="Color" />
• Templates <DoubleAnimation To="45" Duration="0:0:2"
Storyboard.TargetName="LowerEllipseTransform"
• Layout Storyboard.TargetProperty="Angle" />

• Controls Library ...

</StackPanel.Triggers>
• Styles and Resources … remainder of contents of StackPanel, including x:Name'd
TheBrush and LowerEllipseTransform …
• Annotation
</StackPanel>
DEMO
TIME
vs
Resources

delicious.com/chriskoenig/silver
light
delicious.com/chriskoenig/wpf
Upcoming Events
• January http://southcentraldevelope
• 26 - MSDN Developer Conferencers.com
• 27 - Dallas ASP.Net User Group
• 29 - Continuous Integration

• February
• 03 - Designers & Developers SIG
• 16 - Shreveport .NET User Group
• 19 - Acadiana .NET User Group

• April
• 25 - Northwest Arkansas Code

http://communitymegaphone.com
Q&A
 © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S.
and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond
to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation.