1. Windows Presentation Foundation Maximilian Knor Developer Evangelist Developer and Plattform Group Microsoft Österreich max.knor@microsoft.com http://blogs.msdn.com/knom/

2. MSDN Briefings – Organisation Monthly technical briefings Currently released technology Your current needs Invitation / Registration / Feedback http://blogs.msdn.com/msdnat http://blogs.msdn.com/talk Well, what I am doing here?

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

4. Why WPF? Another UI Framework? Aren‘t these some classics App flickers on re-size Overlay controls and videos Themeing und styling What‘s the cause? Win32 has limits Graphics rendered by CPU

5. The WPF Approach Unify UI, Documents, Media Integrated development New Windows infrastructure Vector based graphics Use display hardware (D3D) Built-in UI patterns Designers and tools Bringing designers into the process Declarative programming models

6. .NET 3.0 Windows Presentation Foundation Windows Communication Foundation Windows Workflow Foundation Windows Card Space WPF User Experience WCF Unified Messaging WF Federated Workflow CS Federated Identity

7. WPF Programming Model Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = new Length(100); OK HorizontalGradient= "White LtBlue" Dim b1 As New Button b1.Content = "OK" b1.Background = New SolidColorBrush(Colors.LightBlue) b1.Width = New Length(100) Separate UI and behavior Do you know ASP.NET Similar but more powerful XAML What, Not How! Creates object hierarchy

8. Designer Developer Developer Designer Collaboration

9. XAML Extensible Applications Markup Language

10. Properties as Attributes or Elements

11. Attached Properties

12. Markup Extensions

13. Topics Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation Interop and Migration

14. Shapes Elements of UI tree Just like controls and other elements Rectangle Ellipse Polyline Polygon Path

15. Demo 2D Shapes

16. Shapes Example

17. Shapes and Code Shapes accessible from code behind Just like any element Change appearance by setting properties Screen is automatically updated

18. Brushes Specifies how shape is filled Used for properties throughout WPF

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

20. ImageBrush

21. Composability: DrawingBrush Fill with vector image Scalable

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

23. OpacityMask Apply opacity to any visual using any Brush

24. Transformations Any element can be transformed Scaling, rotation, moving Optionally affects layout LayoutTransform RenderTransform Included into hit testing

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

26. Demo Transformations

27. Topics Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation Interop and Migration

28. Class Hierarchy

29. Dependency Property

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

31. WPF Positioning Absolute Positioning X / Y, Width / Height Relative Positioning NO X/Y, Width/Height Margin Alignment

32. WPF Positioning - Alignment HorizontalAlignment Stretch, Left, Right, Center VerticalAlignment Stretch, Top, Center, Bottom

33. Simple Controls PasswordBox ScrollBar ProgressBar Slider TextBox RichTextBox...

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

35. Demo Controls

36. Events Routed Event Handling Routing Strategy Tunneling, Bubbling, Direct

37. Events Create Routed Events

38. Events Event notation PreviewXxx – Tunnelled Xxx - Bubbled Base Class RoutedEventArgs Attached Events

39. Demo Routed Event Handling

40. Headered Content Controls Content Control with additional header Expander MenuItem GroupBox TabItem Usw.

41. Items Controls Container for multiple items (list) ListBox ComboBox Menu ContextMenu StatusBar TreeView TabControl Usw.

42. Commands Controls define a command CommandBindings define the handler

43. Demo TabControl, Listbox, Toolbar, Commands

44. Topics Windows Presentation Foundation Overview 2D Controls and Layout Styles, Templates & Resources Data Binding Animation Interop and Migration

45. Designer Developer

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

47. Styles are about setting properties…

48. Setting Properties Trigger Animations Template Styles

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

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

52. Resource Dictionaries Simple Key, Value collection FrameworkElement.Resources

53. Resource Hierarchy System Resources Application Resources Element Resources Element Resources Element Resources Window/Page Resources Window/Page Resources Element Resources Application Resources

54. Application Resources Styles and templates Shared graphics

55. Page/Window Resources Utility elements Data sources Converters Page-specific templates

56. Element-Specific Resources Locally-scoped Styles and templates

57. 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

58. Demo Styles

59. System Resources SystemColors – Colors and Brushes SystemFonts SystemParameters (sizes, settings)

60. 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