A Jumpstart to WPF by Kevin Grossnicklaus ArchitectNow Agenda Introduction What is WPF? Resources XAML Advanced Topics Expression Blend Silverlight? Conclusion/Questions Introduction Kevin Grossnicklaus o ArchitectNow- www.ArchitectNow.net (2009-Present) • o Washington University - CAIT Program (2003-Present) • o Instructor SSE - www.SSEinc.com (1999-2009) • • President Chief Architect Software Development Practice Leader Email: [email protected] WHAT IS WPF? Windows Presentation Foundation (WPF)? User interface framework for Windows platforms Replaces WinForms o Released in 2006 with the .NET 3.0 (NetFX) distributable Designer support built into: o o o o WinForms = Traditional .NET Windows Application framework Visual Studio.NET 2005 (via Plug-In) Visual Studio.NET 2008 (natively) Visual Studio.NET 2008 SP1 (natively) 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 o o o o …used to develop rich, client-side interfaces … are extensible through custom controls …promote a WYSIWYG design experience …take advantage of the local client resources …provide a significant number of controls and widgets used to build up interfaces • o Both built-in and 3rd party …sit on top of the MFC classes that make up the current Windows implementation WinForms o o o o Generally designed with manual layout of controls at fixed sizes and positions Generally supports the “traditional” grey UI typical of most current LOB applications Essentially a port of the traditional VB6 Windows development model to the .NET Framework 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 o o o o o o www.WindowsClient.net www.CodeProject.com www.CodePlex.com http://www.codeproject.com/kb/wpf/ http://Wpf.codeplex.com Control Browser: http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/02/03/silverlight-wpfcontrol-browser.aspx LearnWPF.Net • Books: http://learnwpf.com/Default.aspx WPF Tools Visual Studio.NET 2008 SP1 Microsoft Expression Blend (Version 2.0 or 3.0) o KAXAML o http://www.kaxaml.com/ Tools Links: o http://www.microsoft.com/expression/ http://blogs.msdn.com/mswanson/articles/WPFToolsAndControls.aspx CompositeWPF: o http://compositewpf.codeplex.com/ WPF Examples Family.Show o o Woodgrove Financial o http://scorbs.com/workapps/woodgrove/FinanceApplication.xbap VantagePoint Demos o http://www.vertigo.com/familyshow.aspx http://www.codeplex.com/familyshow (Code) http://www.mobiform.com/VantagePointDemo/VantagePointDemo.xbap Showcase Projects o http://windowsclient.net/community/showcase.aspx INTRO TO XAML XAML XAML = eXtensible Application Mark-up Language o XML syntax for declaring runtime object model (and properties of any object) o Rhymes with “Camel” 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 o o o o o StackPanel Canvas DockPanel TabControl Grid 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 functionality o o Both: o o o Full WPF is limited to Windows desktops with the .NET 3.0+ Framework Silverlight runs on Mac OSX, Windows, and Linux (via Moonlight) Are heavily built around XAML Have significant built-in designer support within Visual Studio.NET 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? [email protected] Conclusion Thank you for coming!