The Microsoft Technical Roadshow 2006 Windows Presentation Foundation (WPF) Marcus Perryman

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

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?

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

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

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

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

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

WPF Architectural Sketch PresentationCore Direct 3DUSER32 Composition Engine PresentationFramework

My First WPF Application Demo

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

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 BAML ParseLoad, Display

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”) My.Baml Parse & Generate Compile and Run

Adding WPF to Existing WinForms Applications Demo

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

What Can It Do? DrawingPaintingControlsLayout Document interface TextAnimation3D Data Binding

WPF Capabilities Demo

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

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

Design Tools Demo

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

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

Building the Nugget Viewer Demo

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

Where Next? WPF WinFX

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