1. 1 Introduction to WPFUCN / 2012 Introduction to WPF Introduction to WPF Based on a Microsoft presentation

2. 2 Introduction to WPFUCN / 2012.NET At The Core

3. 3 Introduction to WPFUCN / 2012 Topics Windows Presentation Foundation –Overview –2D –Controls and Layout –Styles, Templates & Resources –Data Binding –Animation

4. Overview

5. 5 Introduction to WPFUCN / 2012 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 WPFUCN / 2012 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 WPFUCN / 2012 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 WPFUCN / 2012 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 WPFUCN / 2012 Designer Developer Developer Designer Collaboration

10. 10 Introduction to WPFUCN / 2012 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 WPFUCN / 2012 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 WPFUCN / 2012 Attached Properties Click Me! Click Me!

13. 2D Graphics

14. 14 Introduction to WPFUCN / 2012 Shapes Elements of UI tree –Just like controls and other elements Rectangle Ellipse Polyline Polygon Path

15. 15 Introduction to WPFUCN / 2012 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 WPFUCN / 2012 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 WPFUCN / 2012 Transforms Any element can be transformed –Scaling, rotation, shearing Optionally affects layout

18. 18 Introduction to WPFUCN / 2012 Hit Testing Built in for all drawing elements Takes transformations into account Bubbling event model

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

20. 20 Introduction to WPFUCN / 2012 Linear/RadialGradientBrush Fills across a range of colors Enables interesting visual effects

21. 21 Introduction to WPFUCN / 2012 ImageBrush <ImageBrush ImageSource="c:\Windows\Blue Lace 16.bmp" /> Hello, World!

22. 22 Introduction to WPFUCN / 2012 Composability: DrawingBrush Fill with vector image –Scalable

23. 23 Introduction to WPFUCN / 2012 Composability: VisualBrush Fill with any UI element Makes certain design tricks easy –Reflection of UI –Use as 3D surface texture

24. 24 Introduction to WPFUCN / 2012 OpacityMask Apply opacity to any visual using any Brush

25. 25 Introduction to WPFUCN / 2012 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 WPFUCN / 2012 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 WPFUCN / 2012 Summary Modern integrated content platform Consistency across UI and development Higher quality through hardware advances

28. Controls and Layout

29. 29 Introduction to WPFUCN / 2012 Class Hierarchy

30. 30 Introduction to WPFUCN / 2012 Layout Controls StackPanel WrapPanel Canvas DockPanel Grid...

31. 31 Introduction to WPFUCN / 2012 Simple Controls PasswordBox ScrollBar ProgressBar Slider TextBox RichTextBox...

32. 32 Introduction to WPFUCN / 2012 Content Controls Button RepeatButton ToggleButton CheckBox RadioButton Label Frame ListBoxItem StatusBarItem ScollBarViewer ToolTip UserControl Window NavigationWindow...

33. 33 Introduction to WPFUCN / 2012 Headered Content Controls Expander GroupBoxItem TabItem...

34. 34 Introduction to WPFUCN / 2012 Items Controls Menu ContextMenu StatusBar TreeView ListBox ComboBox TabControl...

35. 35 Introduction to WPFUCN / 2012 Summary Controls Containers Events Commands

36. Styles, Templates and Resources

37. 37 Introduction to WPFUCN / 2012 Designer Developer

38. 38 Introduction to WPFUCN / 2012 Skeleton Prototype & Experiment Feedback from Customers Final Product Design Development Process Styling & Templates

39. 39 Introduction to WPFUCN / 2012 Styles are about setting properties…

40. 40 Introduction to WPFUCN / 2012 Setting Properties Trigger Animations Template Styles

41. 41 Introduction to WPFUCN / 2012 Lookless Controls and Templates Control implies behaviour Probably supplies default look –Designer free to supply new look

42. 42 Introduction to WPFUCN / 2012

43. 43 Introduction to WPFUCN / 2012 Styling and Resources Style rarely defined inline –Tend to be reused for consistency Usually defined as resources

44. 44 Introduction to WPFUCN / 2012 Resource Dictionaries Simple Key, Value collection FrameworkElement.Resources... Click

45. 45 Introduction to WPFUCN / 2012 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 WPFUCN / 2012 Data Binding

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

48. 48 Introduction to WPFUCN / 2012 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

49. 49 Introduction to WPFUCN / 2012 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. 50 Introduction to WPFUCN / 2012 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} }" />

51. 51 Introduction to WPFUCN / 2012 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}

52. 52 Introduction to WPFUCN / 2012 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;

53. 53 Introduction to WPFUCN / 2012 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}}" />

54. 54 Introduction to WPFUCN / 2012 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;

55. 55 Introduction to WPFUCN / 2012 Databases and Web Services No special support required Use object binding –DataSet/DataTable support the TypeDescriptor system

56. 56 Introduction to WPFUCN / 2012 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;

57. 57 Introduction to WPFUCN / 2012 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">

58. 58 Introduction to WPFUCN / 2012 Choosing a Data Template By Name (resource dictionary key) –ContentTemplate/ItemTemplate= {StaticResource myStyle} By Type – – for XML

59. 59 Introduction to WPFUCN / 2012 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

60. 60 Introduction to WPFUCN / 2012 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

61. 61 Introduction to WPFUCN / 2012 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 :-(