Slide 1

The Microsoft Technical Roadshow 2006 Windows Presentation Foundation (WPF) Marcus Perryman http://blogs.msdn.com/marcpe mailto:marcus.perryman@microsoft.com Slide 2 Whats Windows Presentation Foundation? Visually stunning user interfaces Themes Unified programming model Declarative programming Integrated designer tools Slide 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? Slide 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 Slide 5 Whats 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 Slide 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 Slide 7 WPF: Using the Hardware Vector-based composition engine uses the PCs graphics power Quality is preserved with scale CPU freed from graphics work Gain capability from graphics card advances Slide 8 WPF: Common Design Language Declarative design model links designers and developers Slide 9 WPF Architectural Sketch PresentationCore Direct 3DUSER32 Composition Engine PresentationFramework Slide 10 My First WPF Application Demo Slide 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 Slide 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 Slide 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 Slide 14 Adding WPF to Existing WinForms Applications Demo Slide 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 Slide 16 What Can It Do? DrawingPaintingControlsLayout Document interface TextAnimation3D Data Binding Slide 17 WPF Capabilities Demo Slide 18 DEMO STEPS Using XamlPad (Windows SDK) Drawing, Painting (Fills, grad, VisualBrush) Layout / Controls + composition Simple Animation and 3D Slide 19 How Can I Make It Do That? Tools for Building WPF Applications Edit XAML directly in your favourite text editor (e.g. notepad) Its 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 Rains Zam3D Slide 20 Design Tools Demo Slide 21 DEMO STEPS Show Expression designer Layout the basic shape of the nugget viewer Use Zam3D to build a scene Bring them together Slide 22 Roadshow Nugget Viewer Using Templates Databinding Using 3D effects Interacting with code Using the object model Slide 23 Building the Nugget Viewer Demo Slide 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 Slide 25 Where Next? WPF http://msdn.microsoft.com/winfx/reference/presentation WinFX http://msdn.microsoft.com/winfx http://www.roadtowinfx.com Slide 26 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.