Adding Style To Your Microsoft Wpf And Silverlight Applications

11

description

Slides for presentation on WPF and Silverlight data binding, styles and templates. The sample code can be downloaded at http://cid-427749d05e37d212.skydrive.live.com/self.aspx/Presentations/AddStyleToWPFandSLApps.zip

Transcript of Adding Style To Your Microsoft Wpf And Silverlight Applications

Page 1: Adding Style To Your Microsoft Wpf And Silverlight Applications
Page 2: Adding Style To Your Microsoft Wpf And Silverlight Applications

Agenda

• Quick overview of WPF / Silverlight / XAML• Data Binding• Element to Element Data Binding• Binding to Objects• Binding to Collections• Master-Detail Binding• Data Binding and the Debugger

• Styles• Creating custom Styles• “Apply to All” Styles• Inherited Styles

• Templates• Creating Control Templates• Custom Data Templates

• Visual State Manager

Page 3: Adding Style To Your Microsoft Wpf And Silverlight Applications

Windows Presentation Foundation

Page 4: Adding Style To Your Microsoft Wpf And Silverlight Applications

is a

cross-browsercross-platformcross-device

implementation of .NET

for building and delivering the next generation of

media experiences&

rich interactive applications

for the Web

Microsoft Silverlight

Page 5: Adding Style To Your Microsoft Wpf And Silverlight Applications

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.Background> LightBlue </Button.Background></Button>

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush (Colors.LightBlue);b1.Width = 100;

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush _ (Colors.LightBlue)b1.Width = 100

Page 6: Adding Style To Your Microsoft Wpf And Silverlight Applications

Data Binding

• 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

<StackPanel> <Label>Select A Customer</Label> <ListBox Name="myListBox" Background="HoneyDew" ItemsSource= "{Binding {StaticResource mySource}}" </ListBox></StackPanel>

Binding Target Binding Source

Dependency Object Object

Dependency Property PropertyTwoWay

OneWay

OneWayToSource

Page 7: Adding Style To Your Microsoft Wpf And Silverlight Applications

Controls, Templates, Styles & Resources, Layouts, Animation

Animation, Triggers, Timelines

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

<ColorAnimation To="Yellow" Duration="0:0:0.5“ Storyboard.TargetName="TheBrush" Storyboard.TargetProperty="Color" />

<DoubleAnimation To="45" Duration="0:0:2" Storyboard.TargetName="LowerEllipseTransform" Storyboard.TargetProperty="Angle" />

... </StackPanel.Triggers>

… remainder of contents of StackPanel, including x:Name'd TheBrush and LowerEllipseTransform …

</StackPanel>

UI Services

• Templates

• Layout

• Controls Library

• Styles and Resources

• Annotation

Templated

Button

Page 8: Adding Style To Your Microsoft Wpf And Silverlight Applications

Resources

• http://msdn.microsoft.com/windowsvista

MSDN Developer Center for Windows Vista / WPF

• http://wpf.netfx3.com

Windows Presentation Foundation Technical

Community

• http://www.silverlight.net

Microsoft Silverlight

• http://del.icio.us/ChrisKoenig/

Lots of links for WPF and Silverlight Development

Page 9: Adding Style To Your Microsoft Wpf And Silverlight Applications

Upcoming Events

Houston TechFest has been POSTPONED

• September• 23 – MSDN Unleashed & ArcReady

• October• 9-10 – Tulsa TechFest• 20-22 – in.Telligent Conference

• November• 4 – Election Day (Rock the Vote!)• 14 – Dallas Agile.NET Conference• 18-20 – MSDN TechDays (Dallas)

• December• 8-10 – VSLive! Dallas

• January• 16-18 – We Are Microsoft / GiveCamp Dallas

Page 10: Adding Style To Your Microsoft Wpf And Silverlight Applications
Page 11: Adding Style To Your Microsoft Wpf And Silverlight Applications

© 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. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.