Introduction to WPF

1. Based on a Microsoft presentation Introduction to WPF

2. .NET At The Core

3. Topics • Windows Presentation Foundation • Overview • 2D • Controls and Layout • Styles, Templates & Resources • Data Binding • Animation

4. Overview

5. Now • GDI (20 years), GDI+, WinForms • DirectX (11 years), Direct3D • Quartz, DirectShow (8 years) • Problems • Showing their age • Each API is different • Mixing APIs is challenging

6. Next Gen • WPF – replaces GDI • Direct3D – large games, used by WPF • Media Foundation – ultimately will replace DirectShow • MCML –markup language for Media Center Edition applications • XNA – small games

7. WPF • Compositing • UI, Documents, Media, 3D, Browser, … • Declarative programming with XAML markup • For Designers and Developers • Rewritten from scratch • Built on top of Direct3D • Hardware accelerated • Vector based • Resolution independent • Retained graphics

8. WPF Vision • Integrated, vector-based composition engine • Utilizing the power of the PC throughout the graphics stack • Unified approach to UI, Documents, and Media • Integration as part of development and experience • Declarative programming • Bringing designers directly into application development • Ease of deployment • Allowing administrators to deploy and manage applications securely

9. Designer Developer Developer Designer Collaboration

10. XAML • XML for Applications Markup Language <Button Name="button1"> Click Me! </Button> Button button1 = new Button(); button1.Content = "Click Me!";

11. Properties as Attributes or Elements <Button Content="Click Me!" Background="LightGreen" /> <Button> <Button.Background> LightGreen </Button.Background> Click Me! </Button>

12. Attached Properties <Canvas> <Button Canvas.Top="30" Canvas.Left="40"> Click Me! </Button> </Canvas>

13. 2D Graphics

14. Shapes • Elements of UI tree • Just like controls and other elements

15. Shapes Example <Canvas Width="100" Height="100"> <Ellipse Fill="Yellow" Stroke="Black" StrokeThickness="7" Width="100" Height="100" /> <Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="28" Canvas.Top="28" /> <Ellipse Fill="Black" Width="10" Height="15" Canvas.Left="62" Canvas.Top="28" /> <Path Stroke="Black" StrokeThickness="6" Data="M 30,60 Q 50,90 70,60" /> </Canvas>

16. Shapes and Code • Shapes accessible from code behind • Just like any element • Change appearance by setting properties • Screen is automatically updated <Ellipse Fill="Yellow" x:Name="myEllipse" StrokeThickness="7" Stroke="Black" Width="100" Height="100" /> // ...in code behind myEllipse.Width = 200;

17. Transforms • Any element can be transformed • Scaling, rotation, shearing • Optionally affects layout

18. Hit Testing • Built in for all drawing elements • Takes transformations into account • Bubbling event model

19. Brushes • Specifies how shape is filled • Used for properties throughout WPF • Polymorphic • Composable <RectangleFill="Red" Width="200" Height="100" />

20. Linear/RadialGradientBrush • Fills across a range of colors • Enables interesting visual effects

21. ImageBrush <TextBlock FontSize="72" FontFamily="Arial Black"> <TextBlock.Foreground> <ImageBrush ImageSource="c:\Windows\Blue Lace 16.bmp" /> </TextBlock.Foreground> Hello, World! </TextBlock>

22. Composability: DrawingBrush • Fill with vector image • Scalable

23. Composability: VisualBrush • Fill with any UI element • Makes certain design tricks easy • Reflection of UI • Use as 3D surface texture

24. OpacityMask • Apply opacity to any visual using any Brush

25. Imaging and Video • Elements • Image • MediaElement • Integrate images and video into a brush • Paint shapes • Use as a 3D surface texture • Extensive image handling support • System.Windows.Media.Imaging

26. Future Proofing the Platform and Your Applications • Resolution independent graphics • Double precision floating point coordinates and transformations • Hardware capabilities are abstracted to better map to future hardware advances

27. Summary • Modern integrated content platform • Consistency across UI and development • Higher quality through hardware advances

28. Controls and Layout

29. Class Hierarchy

30. Layout Controls • StackPanel • WrapPanel • Canvas • DockPanel • Grid • ...

31. Simple Controls • PasswordBox • ScrollBar • ProgressBar • Slider • TextBox • RichTextBox • ...

32. Content Controls • Button • RepeatButton • ToggleButton • CheckBox • RadioButton • Label • Frame • ListBoxItem • StatusBarItem • ScollBarViewer • ToolTip • UserControl • Window • NavigationWindow • ...

33. Headered Content Controls • Expander • GroupBoxItem • TabItem • ...

34. Items Controls • Menu • ContextMenu • StatusBar • TreeView • ListBox • ComboBox • TabControl • ...

35. Summary • Controls • Containers • Events • Commands

36. Styles, Templates and Resources

37. Designer Developer

38. Prototype & Experiment Feedback from Customers Design Skeleton Final Product Styling & Templates Development Process

39. Styles are about setting properties…

40. Setting Properties Styles Trigger Animations Template

41. Lookless Controls and Templates • Control implies behaviour • Probably supplies default look • Designer free to supply new look

43. Styling and Resources • Style rarely defined inline • Tend to be reused for consistency • Usually defined as resources

44. Resource Dictionaries • Simple Key, Value collection • FrameworkElement.Resources <Grid> <Grid.Resources> <Style x:Key="dapper"> <Setter Property="Background" Value="LimeGreen" /> </Style> </Grid.Resources> ... <Button Style="{StaticResource dapper}">Click</Button>

45. Window/Page Resources Window/Page Resources Element Resources Resource Hierarchy <Window> <Window.Resources> ... </Window.Resources> <Grid> <Grid.Resources> ... </Grid.Resources> <ListBox> <ListBox.Resources> ... </ListBox.Resources> </ListBox> </Grid> </Window> System Resources Application Resources Application Resources Element Resources Element Resources Element Resources

46. Data Binding

47. Agenda Element data binding Object and XML data binding Data templates Master / child relationships Debugging

48. Data Binding Overview Target Any property, any element Source CLR Object WPF Element ADO.NET XML Dynamic INotifyPropertyChanged, DependencyProperty or PropertyDescriptor Multiple models One Time One Way Two Way Value Converter Control Property Binding “Data Item” Property

49. Binding in Markup <Image Source="truck.png" Canvas.Left= "{Binding Path=Value, ElementID=horzPos}" /> <Slider Orientation= "Horizontal" Name="horzPos" Value="40"/> {Binding Path=Value, ElementName=horzPos}

50. Object Data Providers Add to resource dictionary Named source objects Use with resource binding {StaticResource theCars} <Window> <Window.Resources> <ObjectDataProvider x:Key="myData" ObjectType=" {x:Type Foo}" /> </Window.Resources> ... <TextBlock TextContent="{Binding Path=Bar, Source={StaticResource myData} }" />