WPF in 60 Seconds
So Much WPF - So Little Time
Acing the WPF Interview ;)
OverviewWindows Presentation Foundation
Purpose
• Cover all the topics
• Give an idea of what you can do
• “oh yea, I’ve seen that”
• Don’t stress on learning any of it
• Hopefully create a useful resource
What is WPF
• MS latest greatest Desktop UI Framework• GUIs in .Net• Best of Web, Patterns, and Previous UI Frameworks• UI Framework Released in .Net 3.0 (Nov 2006)
Helpful Background
• .Net• Used a control based UI Framework
o VB6o Windows Formso ASP.Neto etc.
• Familiar with HTML or XML
Why is WPF GreatVisual 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 Vs. Silverlight
• More features• Fewer restrictions• No band-aids or black holes• Desktop Only
Devblog.Ailon.Org
Tools
• Visual Studio (2008, 2010)• Expression Blend (3/4)• ReSharper (auto adds references +++)• Snoop (WPF/free)• Silverlight Spy (paid)
Core WPF
Structure of a WPF App
• Create with VS New WPF Application• App.XAML
o StartupUri="Window1.xaml"o Resourceso Subclass of Windows.Application
• Window1.xamlo ctor: InitializeComponent();o Subclass of Windows.Window
XAML
All roads in WPF lead to XAML• Specialized XML• Creates Visuals like HTML • Controls• Control Templates• Extensions for binding• Resource Dictionaries• Bindings normally defined here• Compiles to BAML
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 - CodePlexout of band releases
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• For Binding Target in Controls • INotifyPropertyChanged is code lighter for source binding in VMs• For Event Routing and Property Inheritance
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
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
MVVM Details
• Presenter• ViewModel• View
– DataContext
– Dispatcher
Binding
• Cheat Sheet• DataContext• ItemsSource
Scenarios• Direct• Element• Ancestor• Multi-Level (target.element.element)
Requriements For Handling Updates• INotify (ObservableCollection)• DependencyObject
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
Resource Dictionary
• x:Name
• x:Key
• StaticResource
• DynamicResource
• ResourceDictionary.MergedDictionaries
• Control.Resources
• Scoping, Cascade Effect
Advanced Binding
• Fallback Value• PriorityBinding• Design Time ViewModel
Styles (are not Templates)
Though they can be skins.
Templates
DataTemplateItemTemplateControlTemplate
Template Selectors vs. DataTemplates
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
• DataTriggers• Property Triggers• Event Triggers• Multi-Triggers
• http://www.wpftutorial.net/Triggers.html
Converters
Change VM data into UI friendlyex:• rename row 0 to row 1• casing
Can work as • Template Selectors• Color Coders• etc.
• CodePlex
• IValueConverter• IMultiValueConverter
Need to put in Resource Dictionary
Ex:
Commanding - Making it Go
More Topics
Data Validation
IDataErrorInfoRequires annoyingly verbose binding syntax, but otherwise quite serviceable
Logical and Visual Trees
Snoop
Threading
• Important, but rarely an issue• Dispatcher• Task• RX
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.
Composite Bootstrapper
WPF Hands-On Lab: Getting Started with the Composite Application Library
• Shell.XAML• Regions:
o ContentControl or ItemsControlo Selector/TabControl
• Bootstrappero CreateShello GetModuleCatalog
• App.OnStartup
Prism Module
• Module: C# Class Library• Module: IModule
o Initialize• Views
o each application UI piece is usually a UserControl• Populate Catalog with Modules
o o From code
most straightforward possibly most common
o o From a XAML fileo From a Configuration fileo From a Directory
Regions
• Specified in XAML and IModules• RegionManager Injected in Module Ctor
o DemoModule(IRegionManager regionManager)• Initialize sets regions
o _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
Top Related