1. 1 Introduction to WPFNoea / PQC - 2008Web Introduction to WPF Introduction to WPF Based on a Microsoft presentation

2. 2 Introduction to WPFNoea / PQC - 2008Web.NET At The Core

3. 3 Introduction to WPFNoea / PQC - 2008Web Topics Windows Presentation Foundation –Overview –2D –Controls and Layout –Styles, Templates & Resources –Data Binding –Animation

4. Overview

5. 5 Introduction to WPFNoea / PQC - 2008Web 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. 6 Introduction to WPFNoea / PQC - 2008Web 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. 7 Introduction to WPFNoea / PQC - 2008Web 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. 8 Introduction to WPFNoea / PQC - 2008Web 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. 9 Introduction to WPFNoea / PQC - 2008Web Designer Developer Developer Designer Collaboration

10. 10 Introduction to WPFNoea / PQC - 2008Web XAML XML for Applications Markup Language Click Me! Click Me! Button button1 = new Button(); button1.Content = "Click Me!"; Button button1 = new Button(); button1.Content = "Click Me!";

11. 11 Introduction to WPFNoea / PQC - 2008Web Properties as Attributes or Elements <Button Content="Click Me!" Background="LightGreen" /> <Button Content="Click Me!" Background="LightGreen" /> LightGreen Click Me! LightGreen Click Me!

12. 12 Introduction to WPFNoea / PQC - 2008Web Attached Properties Click Me! Click Me!

13. 2D Graphics

14. 14 Introduction to WPFNoea / PQC - 2008Web Shapes Elements of UI tree –Just like controls and other elements Rectangle Ellipse Polyline Polygon Path

15. 15 Introduction to WPFNoea / PQC - 2008Web Shapes Example <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" />

16. 16 Introduction to WPFNoea / PQC - 2008Web 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. 17 Introduction to WPFNoea / PQC - 2008Web Transforms Any element can be transformed –Scaling, rotation, shearing Optionally affects layout

18. 18 Introduction to WPFNoea / PQC - 2008Web Hit Testing Built in for all drawing elements Takes transformations into account Bubbling event model

19. 19 Introduction to WPFNoea / PQC - 2008Web Brushes Specifies how shape is filled –Used for properties throughout WPF Polymorphic Composable <Rectangle Fill="Red" Width="200" Height="100" />

20. 20 Introduction to WPFNoea / PQC - 2008Web Linear/RadialGradientBrush Fills across a range of colors Enables interesting visual effects

21. 21 Introduction to WPFNoea / PQC - 2008Web ImageBrush <ImageBrush ImageSource="c:\Windows\Blue Lace 16.bmp" /> Hello, World!

22. 22 Introduction to WPFNoea / PQC - 2008Web Composability: DrawingBrush Fill with vector image –Scalable

23. 23 Introduction to WPFNoea / PQC - 2008Web Composability: VisualBrush Fill with any UI element Makes certain design tricks easy –Reflection of UI –Use as 3D surface texture

24. 24 Introduction to WPFNoea / PQC - 2008Web OpacityMask Apply opacity to any visual using any Brush

25. 25 Introduction to WPFNoea / PQC - 2008Web 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. 26 Introduction to WPFNoea / PQC - 2008Web 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. 27 Introduction to WPFNoea / PQC - 2008Web Summary Modern integrated content platform Consistency across UI and development Higher quality through hardware advances

28. Controls and Layout

29. 29 Introduction to WPFNoea / PQC - 2008Web Class Hierarchy

30. 30 Introduction to WPFNoea / PQC - 2008Web Layout Controls StackPanel WrapPanel Canvas DockPanel Grid...

31. 31 Introduction to WPFNoea / PQC - 2008Web Simple Controls PasswordBox ScrollBar ProgressBar Slider TextBox RichTextBox...

32. 32 Introduction to WPFNoea / PQC - 2008Web Content Controls Button RepeatButton ToggleButton CheckBox RadioButton Label Frame ListBoxItem StatusBarItem ScollBarViewer ToolTip UserControl Window NavigationWindow...

33. 33 Introduction to WPFNoea / PQC - 2008Web Headered Content Controls Expander GroupBoxItem TabItem...

34. 34 Introduction to WPFNoea / PQC - 2008Web Items Controls Menu ContextMenu StatusBar TreeView ListBox ComboBox TabControl...

35. 35 Introduction to WPFNoea / PQC - 2008Web Summary Controls Containers Events Commands

36. Styles, Templates and Resources

37. 37 Introduction to WPFNoea / PQC - 2008Web Designer Developer

38. 38 Introduction to WPFNoea / PQC - 2008Web Skeleton Prototype & Experiment Feedback from Customers Final Product Design Development Process Styling & Templates

39. 39 Introduction to WPFNoea / PQC - 2008Web Styles are about setting properties…

40. 40 Introduction to WPFNoea / PQC - 2008Web Setting Properties Trigger Animations Template Styles

41. 41 Introduction to WPFNoea / PQC - 2008Web Lookless Controls and Templates Control implies behaviour Probably supplies default look –Designer free to supply new look

42. 42 Introduction to WPFNoea / PQC - 2008Web

43. 43 Introduction to WPFNoea / PQC - 2008Web Styling and Resources Style rarely defined inline –Tend to be reused for consistency Usually defined as resources

44. 44 Introduction to WPFNoea / PQC - 2008Web Resource Dictionaries Simple Key, Value collection FrameworkElement.Resources... Click

45. 45 Introduction to WPFNoea / PQC - 2008Web Resource Hierarchy System Resources Application Resources Element Resources Element Resources Element Resources Window/Page Resources Window/Page Resources Element Resources Application Resources.........

46. 46 Introduction to WPFNoea / PQC - 2008Web Application Resources Styles and templates Shared graphics <Application x:Class="ResourcePlay.MyApp" xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">

47. 47 Introduction to WPFNoea / PQC - 2008Web Page/Window Resources Utility elements –Data sources –Converters Page-specific templates

48. 48 Introduction to WPFNoea / PQC - 2008Web Element-Specific Resources Locally-scoped Styles and templates.........

49. 49 Introduction to WPFNoea / PQC - 2008Web Automatic Styles/Templates Most resources must use x:Key Optional with Styles and Data Templates –Can use TargetType or DataType instead –Applied to target automatically – no reference required

50. 50 Introduction to WPFNoea / PQC - 2008Web System Resources SystemColors – Colors and Brushes SystemFonts SystemParameters (sizes, settings) <Rectangle Height="50" Width="100" Fill="{x:Static SystemColors.ControlBrush}" /> <Rectangle Height="50" Width="100" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />

51. 51 Introduction to WPFNoea / PQC - 2008Web Resources and Code-Behind FindResource SetResourceReference Change resource value with indexer –someElem.Resources["foo"] = bar; Initializing from code-behind not so good –Must set before referencing XAML loaded –OK for app resources, less good otherwise

52. 52 Introduction to WPFNoea / PQC - 2008Web Summary Styles empower designers Styles enable vibrant visuals Styles are the glue for WPF Styles depend on resources

53. 53 Introduction to WPFNoea / PQC - 2008Web Data Binding

54. 54 Introduction to WPFNoea / PQC - 2008Web Agenda Element data binding Object and XML data binding Data templates Master / child relationships Debugging

55. 55 Introduction to WPFNoea / PQC - 2008Web 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 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 “Data Item” Property Binding Property

56. 56 Introduction to WPFNoea / PQC - 2008Web 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}

57. 57 Introduction to WPFNoea / PQC - 2008Web Object Data Providers Add to resource dictionary –Named source objects Use with resource binding –{StaticResource theCars} <ObjectDataProvider x:Key="myData" ObjectType=" {x:Type Foo}" />... <TextBlock TextContent="{Binding Path=Bar, Source={StaticResource myData} }" />

58. 58 Introduction to WPFNoea / PQC - 2008Web Share Common Source StackPanel Image HorizontalSlider Value= {Binding Path=XPos, Source={StaticResource myData}} Canvas.Left= {Binding Path=XPos, Source={StaticResource myData}} DataContext= {Binding Source={StaticResource myData}} Value= {Binding Path=XPos} Canvas.Left= {Binding Path=XPos}

59. 59 Introduction to WPFNoea / PQC - 2008Web Provide Data From Code May be easier to load data in codebehind Can set DataContext in code Foo myDataObject = new Foo(); myDataObject.Bar = 42; // Set DataContext myWindow.DataContext = myDataObject;

60. 60 Introduction to WPFNoea / PQC - 2008Web Binding to XML <Car Make="Ford" Model="F-150"> truck.png... cars.xml <XmlDataProvider x:Key="cars" XPath="/Cars/Car" Source="cars.xml" /> <TextBlock TextContent="{Binding XPath=@Make, Source={StaticResource cars}}" />

61. 61 Introduction to WPFNoea / PQC - 2008Web Provide XML From Code Can load XML data in codebehind –Just like any other data XmlDocument doc = new XmlDocument(); doc.LoadXml(" Hello, world "); myGrid.DataContext = doc;

62. 62 Introduction to WPFNoea / PQC - 2008Web Databases and Web Services No special support required Use object binding –DataSet/DataTable support the TypeDescriptor system

63. 63 Introduction to WPFNoea / PQC - 2008Web Data and Controls ContentControl – singular content –Button, CheckBox, Label, ListBoxItem, … ItemsControl – plural content –ListBox, ComboBox, Menu, TabControl, ToolBar, … Can use data objects as content myListBox.Items.Add(new Car()); myButton.Content = new Car(); Car c = (Car) myListBox.SelectedItem;

64. 64 Introduction to WPFNoea / PQC - 2008Web Data Templates DataTemplate class Car { string Image {get;set} string Model {get;set} } <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF" BorderThickness="1" Margin="10" Padding="3">

65. 65 Introduction to WPFNoea / PQC - 2008Web Choosing a Data Template By Name (resource dictionary key) –ContentTemplate/ItemTemplate= {StaticResource myStyle} By Type – – for XML

66. 66 Introduction to WPFNoea / PQC - 2008Web Summary WPF understands your data –use your favorite data model: XML, objects, SQL, WS … –Bind data to controls Templates give your data a face Controls “think” data –Data is pervasive across and integrated into the platform

67. Animation

68. 68 Introduction to WPFNoea / PQC - 2008Web Why Animation? Enabling richer experiences Make a UI feel more naturalistic Smoother visual transitions

69. 69 Introduction to WPFNoea / PQC - 2008Web Animation Anywhere Any property can be animated Anywhere ≠ everywhere –Exercise taste & discretion

70. 70 Introduction to WPFNoea / PQC - 2008Web Declarative animation Tell animation system what you want –E.g. change Width from 10 to 100 over 10 seconds Does all the work for you –No need to set up timers –No need for custom drawing <DoubleAnimation From="10" To="100" Duration="0:0:10" Storyboard.TargetName="myellipse" Storyboard.TargetProperty="(Ellipse.Width)" />

71. 71 Introduction to WPFNoea / PQC - 2008Web Essential Elements Triggers Timelines Animations

72. 72 Introduction to WPFNoea / PQC - 2008Web Triggers Fire animations in response to stimuli –Use in element, Style, or template Two trigger styles: –Event-driven: –Property-driven: (enter and exit animations)

73. 73 Introduction to WPFNoea / PQC - 2008Web Timelines A stretch of time: BeginTime and Duration Timelines form a hierarchy Some timelines are just structural –E.g. ParallelTimeline Other timelines do interesting things –Animation timelines

74. 74 Introduction to WPFNoea / PQC - 2008Web Animation Timelines Animations specific to target type –DoubleAnimation, PointAnimation, etc. <DoubleAnimation From="10" To="100" Duration="0:0:10" Storyboard.TargetName="myellipse" Storyboard.TargetProperty="(Ellipse.Width)" />

75. 75 Introduction to WPFNoea / PQC - 2008Web Relative vs Absolute Animations From and To Just To By From and By

76. 76 Introduction to WPFNoea / PQC - 2008Web Acceleration/Deceleration Adds more natural feel to motion <DoubleAnimation From="50" To="70" AccelerationRatio="0.2" DecelerationRatio="0.3" Storyboard.TargetName="someElement" Storyboard.TargetProperty="(Ellipse.Width)" /> Sum must be <= 1

77. 77 Introduction to WPFNoea / PQC - 2008Web Repeating and Reversing Timelines RepeatBehavior –Forever –Time, e.g. “0:0:5” repeats for 5 seconds –Count, e.g. “5.6x” repeats 5.6 times AutoReverse –True or False

78. 78 Introduction to WPFNoea / PQC - 2008Web Key Frame Animations Simpler than lots of individual timelines Also offer spline animation

79. 79 Introduction to WPFNoea / PQC - 2008Web Animations and Styles Can add animation by restyling control –No special support required by control Style.Triggers ControlTemplate.Triggers

80. 80 Introduction to WPFNoea / PQC - 2008Web Example: Triggers <Rectangle Fill="{TemplateBinding Background}" RadiusX="10" RadiusY="10" Stroke="Black" x:Name="outline" /> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> <DoubleAnimation Duration="0:0:0.2" AutoReverse="True" Storyboard.TargetProperty="(Rectangle.StrokeThickness)" Storyboard.TargetName="outline" By="1" />

81. 81 Introduction to WPFNoea / PQC - 2008Web Animation in Code Can launch animations from code –Alternative to markup+storyboards –Allow more runtime flexibility DoubleAnimation d = new DoubleAnimation(500, new Duration(TimeSpan.FromSeconds(2))); myRect.BeginAnimation(Rectangle.WidthProperty,d);

82. 82 Introduction to WPFNoea / PQC - 2008Web CompositionTarget.Render Animation timelines not always ideal solution –Real-time physics modeling doesn’t fit this model well Low level alternative: Render event –Called for each frame –That is all Note: frame rate not constant

83. 83 Introduction to WPFNoea / PQC - 2008Web Summary Any property can be animated Define animations as Timeline hierarchies Put animations on page or in styles Declarative control with triggers

84. 84 Introduction to WPFNoea / PQC - 2008Web Links Sites –http://windowsclient.net/http://windowsclient.net/ –http://wpf.netfx3.com/ (moving to windowsclient)http://wpf.netfx3.com/ –WPF Windows SDK DocumentationWPF Windows SDK Documentation –My Five Day Course For Hitting the WPF Curve/CliffMy Five Day Course For Hitting the WPF Curve/Cliff –www.brains-N-brawn.com/backRow/www.brains-N-brawn.com/backRow/ –http://sessions.visitmix.com/http://sessions.visitmix.com/ –http://wpf.netfx3.com/files/folders/labs/default.aspx (The tutorials are from here)http://wpf.netfx3.com/files/folders/labs/default.aspx –http://devlicio.us/blogs/rob_eisenberg/default.aspx (Søg efter ‘Crash Course’http://devlicio.us/blogs/rob_eisenberg/default.aspx

85. 85 Introduction to WPFNoea / PQC - 2008Web Exercise Make tutorials of free choice from the tutorial folder or from the videos on http://windowsclient.net/http://windowsclient.net/ The following are recommended: –Creating Rich 2D and 3D Content in WPF –ColorSwatch –Using Data Binding in WPF –LiveSearch (using a webservice and data binding) –The video tutorials! You might also visit the video casts from the Mix Conferences: http://sessions.visitmix.com/http://sessions.visitmix.com/ Challenge: –Make a rotating cube with a playing video on each side. –Might need some computing power to run :-(