So Much WPF - So Little Time Acing the WPF Interview ;) WPF in 60 Seconds Who's got time for 21 days or 24 hours, how about everything in 60 bites in only 60 minutes! So Much WPF - So Little Time Acing the WPF Interview ;)

Overview Windows Presentation Foundation

Goals Cover all WPF topics (impossible) Show some of what WPF can do Show how WPF works Create a useful resource

What is WPF MS latest greatest Desktop UI Framework Best of Web Style and Previous UI Frameworks UI Framework Released in .Net 3.0 (Nov 2006) The future of Windows Desktop Applications The 2nd best Windows GUI framework Declarative “Easily” separates GUI and business logic Feature rich My next presentation will be 3.0 to 4.0, but in this one I figure the majority of companies are still with 3.5 for a while. It's 4 years old, why are we still talking about it?  Adoption IMHO is incomplete and still gaining traction.  With WPF 4.0 its obviously the UI Framework for the next half decade at least.  Its the place to be. Patterns: observer, mvvm, binding, Get a Hitchhikers guide image here

Helpful Background .Net 3.0, Visual Studio Used a UI Framework with controls VB6 Windows Forms ASP.Net etc. Familiar with HTML or XML

Why is WPF Great Visual Flexibility, Quick Results, Great Features Auto Sizing, Auto Positioning Layout Templating Styles:  similar in concept to CSS:  allow skinning Convenient (once you get the hang of it) Feature Rich Binding  Triggers, Animation Property Inheritance Attached Properties Bubbling & Tunneling Events XAML is like HTML: its easy to create UIs visually and in markup Rich UI Control: positioning, gradients, layering/opacity, etc. Compositional Controls: (pictures in buttons, buttons in lists, no problem, lists in buttons, with pictures, etc.)

WPF Will Drive You Crazy Can’t find the super fantastic way to do something simple you know exists Visual Studio and Blend crash several times daily VS and Blend inexplicably slow Binding failures can be truly silent So many details and moving parts So many Not all wine & roses

WPF Vs. Silverlight More features Fewer restrictions No band-aids or black holes Desktop Only Devblog.Ailon.Org I'm hoping with each generation of Silverlight, reality will converge with theory and Desktop will need a justification   

WPF Vs. WinForms Winforms: still more third party controls available Otherwise, no contest WinForms is dead to me. RIP.

Tools Visual Studio (2008, 2010) Expression Blend (3/4) ReSharper (auto adds references +++) Snoop (WPF/free) Silverlight Spy (paid) Rooler? Resharper will find and add references for you on the fly and has dozens of other productivity enhancers. Aside from these there's lots of tools, some help with not having blend, but right now I can be happy with just these.

Core WPF  

Structure of a WPF App Create with VS New WPF Application Window1.xaml .xaml, .cs code behind ctor: InitializeComponent(); Subclass of Windows.Window  VS – Add New Project – WPF Application PresentationCore – graphics engine PresentationFramework – xaml engine

App.xaml StartupUri – the window that will be launched to start the app All xaml files have these 2 by default 2006/xaml/presentation: 2006/xaml: has attribute definitions we’ll see later. X prefix – x:Class comes from here x:Class: any xaml file backed by a class will have this – fully qualified w/namespace

XAML All roads in WPF lead to XAML eXtensible Application Markup Language pronounced “zammel” Specialized XML Creates Visuals like HTML / ASP.Net Code behind Compiles to BAML {} for Binding Anyone familiar with HTML should be able to use XAML quickly bindings can be defined in code, but that's rarely needed or used. declarative style -- ??? binding UI to data, usually in a VM which we'll cover later Only purpose I have found for BAML so far is to look smart in interviews (related to dynamically loaded XAML?)

Resource Dictionary Resources to use in Xaml ResourceDictionary.MergedDictionaries x:Key (optional vs. Type) x:Type DynamicResource / StaticResource Control.Resources Scoping, Cascade Effect

Controls All the UI standard controls Composable Content property Winform Equivalents: http://msdn.microsoft.com/en-us/library/ms750559(v=VS.90).aspx

Controls - Panels Hold multiple children

Controls Panels - Multiple Children Canvas Grid StackPanel DockPanel Wrap Panel UniformGrid VirtualizingPanel VirtualizingStackPanel Controls  ItemsControl "Single" Child Control Button CheckBox Radio Button ToggleButton WPF Toolkit - CodePlex out of band releases don't use canvas -- no layout resizing support and its just bad form Grid & StackPanel are the most commonly used controls DockPanel or Grid is great for main layout

Controls Button ToggleButton Controls ItemsControl "Single" Child Control Button CheckBox Radio Button ToggleButton WPF Toolkit - CodePlex out of band releases don't use canvas -- no layout resizing support and its just bad form Grid & StackPanel are the most commonly used controls DockPanel or Grid is great for main layout

Grid Common lightweight layout container Column Width Auto: fit to contents *: take up the rest of the space #*: proportional spacing

Dependency Object / Property DO's have DP's Dependency Objects / Controls Required For Binding Target in Controls INotifyPropertyChanged is code lighter for source binding in VMs For Event Routing and Property Inheritance Saves space as unused properties don’t take up space and each UI object can have hundreds of them Ex of prop inheritance Allows attaching properties to other objects, like Grid.Row Can use the Get/Set because it doesn’t run from UI Binding

DP code vs INotify

UI Features Gradients Geometries Lines CornerRadius Transparency Overlap (xaml order, z-order) Rotation Resize Alignment: Left, Right, Top, Bottom, Stretch Vector Graphics – resize looks great Resolution Independence (dips – 96 dips/inch) 3D

Standard Properties Margin / Padding “L T R B” Fill Border Text Properties Transforms Alignment top/bottom, left/right, center, stretch IsTabStop

MVVM (P) Preferred Pattern for XAML apps (builds on MVP, MVC, XYZ) Enhances testability, separation of concerns Controls are generally not named to favor binding MVP style is often used when needing to reference controls in code -- either publish a method on an interface of the view or make a control visible to code via a property.  Prime example XamDataGrid that has specific loading API that can't be bound Always hit on Jason Dolinger's video when researching: http://blog.lab49.com/archives/2650

MVVM Details Presenter ViewModel View DataContext Dispatcher

Binding Binding Failure "Helpfully" doesn't crash your app or throw exception See Results in the Output Window Or it can truly fail silently: ex: mismatched IList<T> type will set null FallbackValue -- rarely used  Cheat Sheet DataContext ItemsSource Scenarios Direct Element Ancestor Multi-Level (target.element.element) Requriements For Handling Updates INotify (ObservableCollection) DependencyObject where the data comes from in a control you can bind to the control or the continer you can bind to both by having a root element bind to the control as datacontext, then bind to that datacontext to see the containing data, then in an itemtemplate, bind to the vm Binding Failure yes, its nice to not throw exception and some places its necessary

Resources Key Style Brush, DataTemplate, etc. TargetType Setter, Property, Value Brush, DataTemplate, etc.

Advanced Binding Fallback Value PriorityBinding Design Time ViewModel Gotcha in design time ViewModel is that recompiles are sometimes necessary to work with new properties.

Styles (are not Templates) Though they can be skins.

Templates DataTemplate ItemTemplate ControlTemplate Template Selectors vs. DataTemplates http://msdn.microsoft.com/en-us/library/ms742521(v=VS.90).aspx

Context UserControl – set datacontext of sub-element to UserControl (essentially code behind) Template – uses instance binding View – uses ViewModel because UserControl DataContext will be set to VM

Triggers http://www.wpftutorial.net/Triggers.html DataTriggers Property Triggers Event Triggers Multi-Triggers http://www.wpftutorial.net/Triggers.html http://msdn.microsoft.com/en-us/library/ms742521(v=VS.90).aspx

Converters Need to put in Resource Dictionary Change VM data into UI friendly ex: rename row 0 to row 1 casing Can work as  Template Selectors Color Coders etc. CodePlex IValueConverter Convert ConvertBack (rarely used) IMultiValueConverter

Commanding - Making it Go

More Topics  

Data Validation IDataErrorInfo Requires annoyingly verbose binding syntax, but otherwise quite serviceable

Logical and Visual Trees Snoop

Threading Important, but rarely an issue Dispatcher Task RX RX and Task are another presentation, I saw david barnhill present @meetup on Task and its available in RX framework  

Animations DoubleAnimation: change a double value Duration RepeatBehavior

Prism & Unity  

Prism / Unity: Composite Apps Composite Application Guidance for WPF and Silverlight Regions Event Aggregator Catalog (IoC):  Unity Also:  logging interface Microsoft.Practices.ServiceLocation.dll. This assembly contains the Common Service Locator interface used by the Composite Application Guidance to provide an abstraction over Inversion of Control containers and service locators; therefore, you can change the container implementation with ease. internal prism logging will use the registered interface xml files give intellisense support

Composite Bootstrapper WPF Hands-On Lab: Getting Started with the Composite Application Library Shell.XAML Regions:   ContentControl or ItemsControl Selector/TabControl  Bootstrapper CreateShell GetModuleCatalog App.OnStartup

Prism Module Module: C# Class Library Module: IModule Initialize Views each application UI piece is usually a UserControl Populate Catalog with Modules   From code most straightforward possibly most common From a XAML file From a Configuration file From a Directory

Regions Specified in XAML and IModules  RegionManager Injected in Module Ctor DemoModule(IRegionManager regionManager) Initialize sets regions    _regionManager.RegisterViewWithRegion("MainRegion", typeof(Views.HelloWorldView));  

Presenters, VMs, Base Classes, etc.  IModule.Initialize Register type mappings – supports mocking view, vm Create Presenter and register view into region: _regionManager.Regions[Regions.MainRegion].Add( _container.Resolve<CoolIntroPresenter>().View ); Base interfaces and classes in WPF60.Infrastructure.CabSupport

Acknowledgements Thanks to Lab49 Eugene & Jason Channel9