Layouts, Styles and Templates in Windows Presentation Foundation

1. Layouts, Styles and Templates in Windows Presentation Foundation Jennifer Marsman Developer Evangelist Microsoft Corporation

2. Agenda • Overview • Layout Controls • Styles • Control Templates • Data Templates • Events and Triggers

3. Overview

4. What Is User Experience?

5. Measuring UX ROI (end user behaviors / benefits) Success Productivity Retention Comprehension Conversion Satisfaction Excitement Repeat Use User Experience in Software? Windows Vista Office 2007 Ease of Use Learn ability Performance Reliability Security Optimized form factors Legibility / Readability Relevance / Contextualization Richness Graphics & Media Data Visualization Higher Fidelity Information Globalization Accessibility Hardware & Printing Integration

6. XAML = Extensible Application Markup Language XAML C# VB.NET <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 Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 Declarative Programming Through XAML • Easily toolable, declarative markup • Code and content are separate • Can be rendered in the browser / standalone application

7. Designer-Developer Productivity • Microsoft Tools for Designer & Developers • Declarative Programming through XAML • Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) • With XAML designers & developers can streamline their collaboration Designers design Developers add business logic

8. .NET At The Core

9. WPF Architecture Extensible Application Markup Language (XAML) Content Models Resources Data Binding Attach Properties Key Concepts

10. DOCUMENT SERVICES USER INTERFACE SERVICES XPS Documents Application Services Controls Databinding Packaging Services Deployment Services Layout MEDIA INTEGRATION LAYER BASE SERVICES XPS Viewer Windows Presentation Foundation Imaging 2D Audio XAML Text Effects 3D Video Accessibility Animation Input & Eventing Composition Engine Property System Unmanaged Managed Input / Eventing System Property Engine .NET Framework 2.0 Composition Engine Desktop Windows Manager Windows Media Foundation Media Integration Layer Print Spooler DirectX Windows Vista Display Driver (LDDM) WPF Architecture

11. Content Models <Ellipse Fill="Blue" Height="50" Width="50" /> <Rectangle Fill="Green" Height="50" Width="50“ /> <Polygon Fill="Yellow“> <Polygon.Points> <PointCollection> <Point X="25" Y="1"/> <Point X="50" Y="50"/> <Point X="1" Y="50"/> </PointCollection> </Polygon.Points> </Polygon> • Shape • Panel • ItemsControl • ContentControl <ListBox Height="100" Width="100"> <ListBox.Items> <TextBlock>My Text</TextBlock> <Button>My Button</Button> <Image Source="BasicControls\kotomi.jpg" Width="70"/> </ListBox.Items> </ListBox> <Button Height="100" Width="150"> <StackPanel> <TextBlock HorizontalAlignment="Center">Kotomi</TextBlock> <Image Source="BasicControls\Kotomi.jpg" Margin="5" Opacity="0.5" /> </StackPanel> </Button>

12. Resources • Reusable objects such as data, styles and templates. • Static and Dynamic • Static Resources for values that do not change. • Dynamic Resources for values not known until runtime or that change during runtime. • Assigned a unique key via x:Key. • Every element has a Resources property.

13. Binding Target Binding Source Dependency Object Object OneWay Dependency Property Property TwoWay OneWayToSource Data Binding • UI can be bound to CLR objects and 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 Layout & Databinding <StackPanel> <Label>Select A Customer</Label> <ListBox Name="myListBox" Background="HoneyDew" ItemsSource="{Binding {StaticResource myDataSource}}" </ListBox> </StackPanel>

14. Attach Properties • Defined by XAML • Can be set on any object • Property provider implements Get and Set <Grid> <ListBox Grid.Row="0" Grid.Column="0" ToolTip="Select item..."> <Button Grid.Row="1" Grid.Column=“1" Content="Click Me" /> <Image Grid.Row="0" Grid.Column="1“ /> </Grid>

15. Introduction to WPF

16. Layout System and Controls

17. Layout System • Process of measuring and arranging elements on the screen • Panel element is responsible for arranging Children • Used in both window and control layout

18. The Process • Core properties measured on child UIElement. • Sizing properties evaluated on FrameworkElement (Width, Height and Margin, etc.) • Panel specific logic is applied (Dock direction, Orientation). • Content is arranged after all children have been measured. • Children collection is drawn to the screen. • The process is invoked again if additional Children are added to the collection, a LayoutTransform is applied, or the UpdateLayout method is called.

19. Framework Classes FrameworkElement HorizontalAlignment VerticalAlignment Margin Padding Height Width MaxHeight MaxWidth MinHeight MinWidth FlowDirection UIElement Visibility DesiredSize (ReadOnly) ClipToBounds

20. Panel Elements • Canvas – absolute positioning • Grid – position elements by column and row • DockPanel – arrange elements horizontally or vertically • StackPanel – arrange elements in a single line • WrapPanel – sequentially left to right with line breaks • VirtualizingPanel – framework for virtualizing children • Build a custom panel by inheriting from Panel • ArrangeOverride • MeasureOverride

21. Use Panels to Construct the Layout

22. Layout Performance Considerations • AffectsMeasure and AffectsArrange attributes • Use RenderTransform instead of LayoutTransform • Avoid unnecessary calls to UpdateLayout • Consider using the VirtualizingStackPanel

23. Styles: You’ve Got the Look!

24. Declaring and Referencing Style • Any element that derives from FrameworkElement • Store the style in resources • Two ways to apply a style: • By Name • By Type <Style x:Key="Style1"> <Setter Property="Control.Background“ Value="Yellow"/> </Style> <Label Content="Yellow Background" Style="{StaticResource Style1}" /> <Style TargetType="{x:Type Label}"> <Setter Property="FontSize" Value="12pt" /> </Style> <Label Content=“Twelve Point Font” />

25. Extending a Style • Styles can be based on other styles • Base on the style of existing type <Style x:Key="Style2" BasedOn="{StaticResource Style1}"> <Setter Property="Control.Foreground" Value="Blue"/> </Style> <Style x:Key="TitleText" BasedOn="{StaticResource {x:Type Label}}" TargetType="{x:Type Label}"> <Setter Property="FontSize" Value="32pt" /> </Style>

26. Use Styling to Define the Look

27. Creating Reusable Templates

28. Templated Button Control Templates • Control Templates Define the Structure of the Control • Totally Redo the Appearance • Leverage Existing Control Templates (In SDK)

29. Content Models • ContentControl • Button, RadioButton, CheckBox • HeaderedContentControl • Expander, TabItem, GroupBox • ItemsControl • Menu, ListBox, ComboBox, TreeView • HeaderedItemsControl • MenuItem, TreeViewItem, ToolBar

30. Existing Control Templates • In the Windows SDK • Copy as a Starting Point

31. Control Templates

32. Data Templates DataTemplate class Car { string Image {get;set} string Model {get;set} } <DataTemplate x:Key="carTemplate"> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <StackPanel> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF" BorderThickness="1" Margin="10" Padding="3"> <TextBlock FontSize="18" Text="{Binding Path=Model}" /> </Border> </StackPanel> </Border> </DataTemplate>

33. Choosing a Data Template By Name (resource dictionary key) ContentTemplate/ItemTemplate= {StaticResource myStyle} By Type <DataTemplate DataType="{x:Type cc:Car}"> <DataTemplate DataType="Book"> for XML

34. Data Templates

35. Event Triggers

36. Style Triggers • Change a style when a property changes • Change a style based on multiple property values <Style x:Key="Triggers" TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="Button.IsMouseOver" Value="true"> <Setter Property = "Background" Value="Red"/> </Trigger> </Style.Triggers> </Style> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="HasItems" Value="false" /> <Condition Property="Width" Value="Auto" /> </MultiTrigger.Conditions> <Setter Property="MinWidth" Value="120"/> </MultiTrigger>

37. Event Triggers • Change style elements based on an Event • Contains TriggerAction elements • Play a sound • Start a storyboard (ie. Animation) <EventTriggerRoutedEvent="Rectangle.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="300" Duration="0:0:1.5" AccelerationRatio="0.10" DecelerationRatio="0.25" Storyboard.TargetProperty="(Canvas.Width)" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger>

38. Event Triggers

39. Tools • XamlPad • Part of the Windows SDK (free download) • Expression Suite, particularly Expression Blend • Tool for designers • Available to MSDN Premium subscribers • 60 day trial available: http://www.microsoft.com/expression • Visual Studio designer for WPF and WCF • CTP plug-in available for Visual Studio 2005 • Final version available in Orcas

40. Resources Windows SDK http://windowssdk.msdn.microsoft.com .NET Framework 3.0 http://www.netfx3.com Karsten’s Five Day Course for Hitting the WPF Curve http://blogs.msdn.com/karstenj (June 15) Tim Sneath’s Guided Tour of Windows Presentation Foundation http://msdn.microsoft.com/library/en-us/dnlong/html/wpf101.asp

41. www.codetolive.net

43. © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.