A Jumpstart to WPF

by Kevin GrossnicklausArchitectNow

Agenda Introduction What is WPF? Resources XAML Advanced Topics Expression Blend Silverlight? Conclusion/Questions

Introduction Kevin Grossnicklaus

o ArchitectNow- www.ArchitectNow.net (2009-Present)• President

o Washington University - CAIT Program (2003-Present)• Instructor

o SSE - www.SSEinc.com (1999-2009)• Chief Architect• Software Development Practice Leader

Email: kvgros@architectnow.net

WHAT IS WPF?

Windows Presentation Foundation (WPF)? User interface framework for Windows platforms Replaces WinForms

o WinForms = Traditional .NET Windows Application framework Released in 2006 with the .NET 3.0 (NetFX) distributable Designer support built into:

o Visual Studio.NET 2005 (via Plug-In)o Visual Studio.NET 2008 (natively)o Visual Studio.NET 2008 SP1 (natively)o Visual Studio.NET 2010 (natively)

New set of controls and rendering engine Requires Windows

Windows Presentation Foundation (WPF)? WPF UI’s traditionally “declared” in XAML (more on this later) Separation of UI and code Better support for powerful graphic capabilities of newer hardware

Vector vs. Bitmap graphics Scaling

Enhanced controls and control composition Many improvements over the years of effort invested in traditional Windows

development technologies

WinForms vs WPF

Both…o …used to develop rich, client-side interfaceso … are extensible through custom controlso …promote a WYSIWYG design experienceo …take advantage of the local client resourceso …provide a significant number of controls and widgets used

to build up interfaces• Both built-in and 3rd party

o …sit on top of the MFC classes that make up the current Windows implementation

WinFormso Generally designed with manual layout of controls at fixed

sizes and positionso Generally supports the “traditional” grey UI typical of most

current LOB applicationso Essentially a port of the traditional VB6 Windows development

model to the .NET Frameworko Lacking in many areas

• Support for resolution independence• Difficult to modify look or behavior of “built-in” controls• No support for many of Windows common actions (i.e. cut,

copy, paste)• Difficult to localize• Difficult to represent documents• Difficult to represent animations and other media rich

content

WPF UI’s built through composition of various containers

o Containers determine the layout and sizing of children UI’s defined in external XML based file format called XAML Applications built with a mixture of XAML UI declarations and .NET

code behind files Supports a much cleaner and more extensible model for UI

widgets than WinForms Significantly enhanced built-in controls

WPF (Cont.) Full application styling Better localization support Resolution independence (due to vector based nature of

controls) Integrated command pattern for custom commands or

common Windows commands “Lookless” controls that allow for any controls look and feel

to replaced Full Ink and Tablet support out of the box Currently being enhanced and extended Etc, etc…

WPF: CREATING A SIMPLE APPLICATION

WPF AND XAML RESOURCES

WPF Resources Links:

o www.WindowsClient.net o www.CodeProject.como www.CodePlex.com o http://www.codeproject.com/kb/wpf/ o http://Wpf.codeplex.com o Control Browser:

http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/02/03/silverlight-wpf-control-browser.aspx

o LearnWPF.Net• http://learnwpf.com/Default.aspx

Books:

WPF Tools Visual Studio.NET 2008 SP1 Microsoft Expression Blend (Version 2.0 or 3.0)

o http://www.microsoft.com/expression/ KAXAML

o http://www.kaxaml.com/ Tools Links:

o http://blogs.msdn.com/mswanson/articles/WPFToolsAndControls.aspx CompositeWPF:

o http://compositewpf.codeplex.com/

WPF Examples Family.Show

o http://www.vertigo.com/familyshow.aspx o http://www.codeplex.com/familyshow (Code)

Woodgrove Financialo http://scorbs.com/workapps/woodgrove/FinanceApplication.xbap

VantagePoint Demoso http://www.mobiform.com/VantagePointDemo/VantagePointDemo.xbap

Showcase Projectso http://windowsclient.net/community/showcase.aspx

INTRO TO XAML

XAML XAML = eXtensible Application Mark-up Language

o Rhymes with “Camel” XML syntax for declaring runtime object model (and properties of

any object)o Supports hierarchical object model instantiation

XAML can be used to represent any object XAML content is kept in separate files in your VS.NET

Projects with the extension of .XAML. This content is embedded into your projects as resources and then read and parsed at runtime.

XAML IS NOT SPECIFIC TO WPF…WPF TAKES ADVANTAGE OF XAML!

Syntax

System.Windows.Controls.Button b = new System.Windows.Controls.Button();

b.Click += new System.Windows.RoutedEventHandler(button_Click);b.Content = “OK”;

Vs.

<Button Content=“OK” Click=“button_Click>

Syntax 2

System.Windows.Controls.Button b = new System.Windows.Controls.Button();

System.Windows.Shapes.Rectangle r = new System.Windows.Shapes.Rectangle();

r.Width = 40;r.Height = 40;r.Fill = System.Windows.Media.Brushes.Black;b.Content = r;

Vs.

<Button><Button.Content>

<Rectangle Height=“40” Width=“40” Fill=“Black” /></Button.Content>

</Button>

WPF Containers Relative vs. Fixed Positioning Nesting of Controls Some Common WPF Containers:

o StackPanelo Canvaso DockPanelo TabControlo Grido WrapPanel

XAML DEMO

ADVANCED XAML CONCEPTS

Some Advanced XAML and WPF Concepts Attached Properties Markup Extensions Resources Commands DataBinding Control Composition Transforms Styles

EXPRESSION BLEND

Microsoft Expression Blend Tool in the new Microsoft Expression suite of designer packages Full support for Visual Studio.NET project and solution files Graphic designer focused tools for editing XAML files

WPF AND SILVERLIGHT

WPF and Silverlight Silverlight is a Browser Plug-in that renders XAML and supports a significant

portion of the full WPF functionalityo Full WPF is limited to Windows desktops with the .NET 3.0+ Frameworko Silverlight runs on Mac OSX, Windows, and Linux (via Moonlight)

Both:o Are heavily built around XAMLo Have significant built-in designer support within Visual Studio.NETo Can take advantage of external tools like Expression Blend for UX design

UI’s built for the full WPF can many times be pasted into Silverlight applications

WHAT’S NEXT?

Questions?kvgros@architectnow.net

Conclusion

Thank you for coming!