1. The Microsoft Technical Roadshow 2006 Windows Presentation Foundation (WPF) Marcus Perryman http://blogs.msdn.com/marcpe mailto:marcus.perryman@microsoft.com

2. What’s Windows Presentation Foundation? Visually stunning user interfaces Themes Unified programming model Declarative programming Integrated designer tools

3. Agenda What is Windows Presentation Foundation? What can it do? How can I make it do that? Ok, so how did you build the Nugget Viewer?

4. Agenda What is WPF? Unified API Design vs code Code vs XAML ArchitectureCapabilities 2D – drawing, painting, scaling, layout, Text, Animation Tools: Xaml pad, Sparkle, VS Orcas Building an app – the Roadshow app Take a simple forms-based app? Explore the list box Build the inner template item (pre-built) Data binding from WS Events – UI events and routed code events Animation – show how to enlarge / reduce 3D show video animation Including 3D and 2D content Add changes back to display app Building for the browsed - XBAP Final demo – end to end

5. What’s Windows Presentation Foundation? Next generation presentation subsystem for Windows Unified programming model Harness the power of new graphics hardware Provide designers direct input into project development Enables developers and designers to create visually stunning user interfaces

6. Unified WPF API WPF: Programming Model Unification DocumentsUser InterfaceMedia DirectX GDI GDI+ Media Player HTML Word PDF Win Forms Web Forms MFC VB Forms

7. WPF: Using the Hardware Vector-based composition engine uses the PC’s graphics power Quality is preserved with scale CPU freed from graphics work Gain capability from graphics card advances

8. WPF: Common Design Language Declarative design model links designers and developers

9. WPF Architectural Sketch PresentationCore Direct 3DUSER32 Composition Engine PresentationFramework

10. My First WPF Application Demo

11. DEMO STEPS First do the code vs XAML demo Then look at the output – show BAML file and generated C# helloworld.g.cs Dump the exe through ILDASM to show how it loads Run HelloWorld_Browser.xaml and show what happens

12. XAML or Code? Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.Light Blue); b1.Width = 100; Compile and Run OK LightBlue Load, Parse, Display 0101010 BAML ParseLoad, Display

13. XAML or Code? Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.Light Blue); b1.Width = 100; OK LightBlue ‘Code Behind’ Class Partial Class Public Button b1; Public Button b2; Load (“My.Baml”) 0101010 My.Baml Parse & Generate Compile and Run

14. Adding WPF to Existing WinForms Applications Demo

15. DEMO STEPS Open the Winforms simple application and add a WINDOW component Add some stuff to the wpf window On the button load show the WPF window Talk about the Feb CTP Bug in the project

16. What Can It Do? DrawingPaintingControlsLayout Document interface TextAnimation3D Data Binding

17. WPF Capabilities Demo

18. DEMO STEPS Using XamlPad (Windows SDK) Drawing, Painting (Fills, grad, VisualBrush) Layout / Controls + composition Simple Animation and 3D

19. How Can I Make It Do That? Tools for Building WPF Applications Edit XAML directly in your favourite text editor (e.g. notepad) It’s verbose and has strict semantics Tricky to get the settings right Developers: Visual Studio 2005 with ‘WinFX’ extension Windows SDK and XamlPad application Designers / Developers: Microsoft Expression Interactive Designer (Sparkle) 3 rd Party tools like Electric Rain’s Zam3D

20. Design Tools Demo

21. DEMO STEPS Show Expression designer Layout the basic shape of the nugget viewer Use Zam3D to build a scene Bring them together

22. Roadshow Nugget Viewer Using Templates Databinding Using 3D effects Interacting with code Using the object model

23. Building the Nugget Viewer Demo

24. DEMO STEPS Design the main components of the nugget viewer Listbox: Drop the listbox onto the form and add the reference to the nugget data item Databind the list box Include the template into the resources Set the template for the listbox items Add the mouseover events and pick them up in code Add data binding to the details panel Add MediaElement and use visual brush to draw onto 3D surface. And 2D surface Add SelChanged event handler to run the 3D animation SETTER and dependency props

25. Where Next? WPF http://msdn.microsoft.com/winfx/reference/presentation WinFX http://msdn.microsoft.com/winfx http://www.roadtowinfx.com

26. © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.