WPF, Windows Presentation FoundationA platform for building rich user experiences on Windows

An Architect overview

By Shahzad sarwar

Presentation Scope

• What's covered:XMALBasic Elements of WPFArchitectureProperty System / Dependency PropertyRouted EventsBinding SystemStyling / Templating

• What’s Not covered:Controls LibraryGraphics / Multi MediaDocuments

What is WPF?• Next-generation presentation system for building Windows client

applications with visually stunning user experiences.• Resolution-independent• Vector-based rendering engine (advantage of modern graphics

hardware)• Coverage: Extensible Application Markup Language (XAML), controls, data

binding, layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and typography.

Types Of Applications:1. Standalone Applications:

Window class to create windows and dialog boxes Accessed from menu bars and tool bars.

2. Browser-Hosted Applications: (XAML browser applications (XBAPs))

Create pages (Page) and page functions (PageFunction(T))  Navigate between using hyperlinks (Hyperlink classes).

Tech Analysis

WinForms

PDF WinForms +

GDI

Windows Media Player

Direct3D WPF

Forms, Controls

X   X     X

Complex text   X       XImages     X     XVideo / Audio       X   X2D Graphics     X     X

3D Graphics         X X

Reference: http://windowsclient.net/wpf/white-papers/when-to-adopt-wpf.aspx

The Application Class

Additional application-scoped services, including Creating and managing common application infrastructure. Tracking and interacting with application lifetime.

Startup Activated Deactivated ShutdownMode (OnLastWindowClose,OnMainWindowClose, OnExplicitShutdown) SessionEnding (Logging off,Shutting down,Restarting,Hibernating) Exit

Retrieving and processing command-line parameters. Example Sharing application-scope properties and resources. Examples in Code Detecting and responding to unhandled exceptions. Example in Code

The Application Class

Returning exit codes. Example in Code Managing windows in standalone applications Tracking and managing navigation using System.Windows.Navigation;

1. <Hyperlink Control<Hyperlink NavigateUri="UriOfPageToNavigateTo.xaml"> Navigate to Another Page</Hyperlink> 2. Via NavigationService // Instantiate the page to navigate to PageWithNonDefaultConstructor page = new

PageWithNonDefaultConstructor("Hello!"); // Navigate to the page, using the NavigationService this.NavigationService.Navigate(page);

The Application Class

3.Programmatic Navigation with a Pack URI

// Create a pack URI

Uri uri = new Uri("AnotherPage.xaml", UriKind.Relative);

// Get the navigation service that was used to

// navigate to this page, and navigate to

// AnotherPage.xaml

this.NavigationService.Navigate(uri);

Configuring the Host Window's Title, Width, and Height

Fragment Navigation

Navigation to a content fragment

PageURI#ElementName

Navigation Lifetime

• Navigating. Occurs when a new navigation is requested. Can be used to cancel the navigation.

• NavigationProgress. Occurs periodically during a download to provide navigation progress information.

• Navigated. Occurs when the page has been located and downloaded.

• NavigationStopped. Occurs when the navigation is stopped (by calling StopLoading), or when a new navigation is requested while a current navigation is in progress.

• NavigationFailed. Occurs when an error is raised while navigating to the requested content.

• LoadCompleted. Occurs when content that was navigated to is loaded and parsed, and has begun rendering.

• FragmentNavigation Occurs when navigation to a content fragment begins, which happens:– Immediately, if the desired fragment is in the current content.– After the source content has been loaded, if the desired fragment is in

different content.

Navigation Lifetime

Navigation Lifetime

Journal / journal entry(JournalEntry class)The back stack, the forward stack1. Declarative mechanisms provided by WPF <Hyperlink Members of the NavigationService

classCommand="NavigationCommands.BrowseBack">Back</Hyperlink>

2. Programmatic mechanisms provided by WPF GoBack GoForward CanGoBack CanGoForward Retaining Content State with Navigation History

New Page, so data is destroyed, But there is a mechanism to restore state via Journal like navigation history.

Custom implementation is also provided System.Windows.Navigation.CustomContentState

Navigation Lifetime

Structured Navigation OverviewStructured Navigation with PageFunctionOther Types of Structured Navigation

NavigationWindow Classbrowser-style navigation into your standalone applicationsNavigation Hosts

Configuring the Application Definition for MSBuildIn MSBuild project<ApplicationDefinition Include="App.xaml" />Getting the Current Application// Get strongly-typed current applicationApp app = (App)App.Current;

Two way to Start Window or Page 1. ByCode

void App_Startup(object sender, StartupEventArgs e) { ((NavigationWindow)this.MainWindow).Navigate(new Uri("HomePage.xaml",

UriKind.Relative)); }

2. StartupUri="MainWindow.xaml"

WPF Architecture

WPF Architecture

More declarative, "property centric" model of programming

System.Threading.DispatcherObject Support for concurrency and threading. messaging system implemented by the dispatcher. Create a CLR object that has STA behavior.

Thread affinity: A component uses the identity of the executing thread to store some type of

state. OLE 2.0, the clipboard, and Internet Explorer all require single thread affinity

(STA) execution.

The dispatcher: Basic message dispatching system, with multiple prioritized queues Examples of messages include:

Raw input notifications (mouse moved) Framework functions (layout) User commands (execute this method).

WPF Architecture

System.Windows.DependencyObject Dependency Properties: To compute the value of a property based on the value

of other inputs System properties such as themes and user preference Just-in-time property determination mechanisms such as data

binding and animations/storyboards Multiple-use templates such as resources and styles Values known through parent-child relationships with other

elements in the element treeAlso For: Self-contained validation Default values Callbacks that monitor changes to other properties A system that can coerce property values based on potentially

runtime information.

WPF Architecture

System.Windows.Media.Visual Building a tree of visual objects Drawing instructions and metadata about how to render

those instructions (clipping, transformation, etc.). Point of connection between these two subsystems, the

managed API and the unmanaged milcore.

WPF Architecture

Composition: In User32 and GDI:

(Immediate mode clipping system) a clipping bounds outside of which the component isn’t allowed

to touch the pixels, and then the component is asked to paint pixels in that box.

Good for memory constrained environment. In WPF:

"Painter's algorithm" painting model. To render from the back to the front of the display. Each component to paint over the previous component's display. Complex, partially transparent shapes. Better for new type of graphics object.

WPF Architecture

System.Windows.UIElement

Core subsystems including Layout, Input, and Events.

Layout: 1. A fixed set of layout models (HTML supports three models for layout; flow, absolute,

and tables) 2. No model for layout (User32 really only supports absolute positioning)

A flexible, extensible layout model, which could be driven by property values rather than imperative logic.

A two phase model with Measure and Arrange passes. Measure Phase: To determine how much size it would like to take.

A parent element will ask a child to measure several times to determine its optimal position and size. Rule: Size to content.

Arrange phase: To allows a parent to position and determine the final size of each child.

Input: On a kernel mode device driver. Gets routed to the correct process and thread by involving the Windows kernel and User32. Routed to WPF. WPF raw input message and sent to the dispatcher. Raw input events to be converted to multiple actual events.

WPF Architecture

Routing through the element tree. Events are said to "bubble" if they traverse from a target up

the tree to the root. Events are said to "tunnel" if that start at the root and

traverse down to a target.

In the dispatcher for your application you would call TranslateAccelerator which would sniff the input messages in User32 and determine if any matched a registered accelerator.

CommandBindings. To define functionality in terms of a command end point –

something that implements ICommand. Enable an element to define a mapping between an input

gesture (Ctrl+N) and a command (New).

WPF Architecture

System.Windows.FrameworkElement A set of policies and customizations on the subsystems introduced in

lower layers of WPF. A set of new subsystems

Policies: Application layout Direct access to animation through the BeginStoryboard method The data binding subsystem: one or more properties from a given element

to be bound to a piece of data Styling Subsystem: Bind a set of properties from a shared definition to one

or more instances of an element.

System.Windows.Controls.Control Templating allows a control to describe it’s rendering in a parameterized,

declarative manner. The implementation of a control provides a data model and interaction

model This split between the data model (properties), interaction model

(commands and events), and display model (templates) enables complete customization of a control’s look and behavior.

WPF property system

A set of services that can be used to extend the functionality of a common language runtime (CLR) property.

Dependency property: A property that is backed by the WPF property system. What For? 1. A way to compute the value of a property based on the value of other

inputs System properties such as themes and user preference Just-in-time property determination mechanisms such as data binding and

animations/storyboards Multiple-use templates such as resources and styles Values known through parent-child relationships with other elements in the

element tree. 2. To provide self-contained validation, default values, callbacks that

monitor changes to other properties 3. A system that can coerce property values based on potentially runtime

information. 4. Derived classes can also change some specific characteristics of an

existing property by overriding dependency property metadata, rather than overriding the actual implementation of existing properties or creating new properties.

Common Terms

DependencyProperty: Extend property functionality by providing a type that backs a property

DependencyObject: The base class that can register and own a dependency property

Dependency property identifier: A DependencyProperty instance, which is obtained as a return value when registering a dependency property, and then stored as a member of a class.

CLR "wrapper": The actual get and set implementations for the property

public static readonly DependencyProperty IsSpinningProperty = DependencyProperty.Register(... );public bool IsSpinning{ get { return (bool)GetValue(IsSpinningProperty); } set { SetValue(IsSpinningProperty, value); }}

Setting Property Values

1. XAML attribute <Button Background="Red"

Content="Button!"/> 2. Property element syntax.

<Button Content="Button!"> <Button.Background> <ImageBrush ImageSource="wavy.jpg"/> </Button.Background></Button>

3. Setting Properties in CodeButton myButton = new Button();myButton.Width = 200.0;

Routed events

A type of event that can invoke handlers on multiple listeners in an element tree, rather than just on the object that raised the event.

CLR event that is backed by an instance of the RoutedEvent class and is processed by the Windows Presentation Foundation (WPF) event system.

Routed events are events who navigate up or down the visual tree acording to their RoutingStrategy.

Top-level Scenarios for Routed Events Control composition and encapsulation:

Eg: Rich content model. Like an image inside of a Button. Singular handler attachment points:

To attach the same handler multiple times to process events that could be raised from multiple elements.

Example Code Class handling: Permit a static handler that is defined by the class.

(the opportunity to handle an event before any attached instance handlers can. Referencing an event without reflection:

Creates a RoutedEvent field as an identifier, which provides a robust event identification technique that does not require static or run-time reflection.

How Routed Events Are Implemented

// Register the routed eventpublic static readonly RoutedEvent SelectedEvent =

EventManager.RegisterRoutedEvent( "Selected", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(MyCustomControl)); 

// .NET wrapper public event RoutedEventHandler Selected{ add

{ AddHandler(SelectedEvent, value); } remove { RemoveHandler(SelectedEvent, value); }} 

// Raise the routed event "selected“ RaiseEvent(new

RoutedEventArgs(MyCustomControl.SelectedEvent));

Routing Strategies:

Bubbling: Event handlers on the event source are invoked. Then routes to successive parent elements until reaching the element tree root. To report input or state changes from distinct controls or other UI elements.

Direct: Only the source element itself is given the opportunity to invoke handlers in

response. Analogous to the "routing" that Windows Forms uses for events. unlike a standard CLR event, direct routed events support class handling.

Tunneling: Event handlers at the element tree root are invoked. Then The routed event then travels a route through successive child elements

along the route, towards the node element that is the routed event source. Compositing for a control, such that events from composite parts can be

deliberately suppressed or replaced by events that are specific to the complete control.

Input events provided in WPF often come implemented as a tunneling/bubbling pair.

Tunneling events are also sometimes referred to as Preview events, because of a naming convention that is used for the pairs.

Resource

StaticResource: A simple way to reuse commonly defined objects and values. Provides a value for a XAML property by substituting the value of an already

defined resource.Static resource lookup behavior

For the requested key within the resource dictionary defined by the element that sets the property.

Traverses the logical tree upward, to the parent element and its resource dictionary.

Application resourcesWhen:

No intention of changing the value of the resource after it is referenced the first time.

Not reevaluated based on runtime behaviors such as reloading a page. So some performance benefit.

For Value of property that is not on a DependencyObject or a Freezable. Compiled into a DLL, and packaged as part of the application or shared between

applications Creating a theme for a custom control, and are defining resources that are used

within the themes.

DynamicResource

Provides a value for a XAML property by deferring that value to be a run-time reference to a resource.

When: The value of the resource depends on conditions that are not known

until runtime. Like SystemColors, SystemFonts, or SystemParameters Creating or referencing theme styles for a custom control. To adjust the contents of a ResourceDictionary during an application

lifetime. A forward reference may be required The resource might not be used immediately when the page loads. (Static resource references always load from XAML when the page

loads; however, a dynamic resource reference does not load until it is actually used.) Applying resources to elements that might be reparented in the logical

tree during application lifetime.

Dynamic resource

Dynamic resource lookup behavior Within the resource dictionary defined by the element that sets

the property. If the element defines a Style property, the Resources dictionary

within the Style is checked. If the element defines a Template property, the Resources

dictionary within the FrameworkTemplate is checked. Traverses the logical tree upward, to the parent element and its

resource dictionary. Application resources Theme resource dictionary System resources

Merged Resource Dictionary A way to define the resources portion of a WPF application

outside of the compiled XAML application. (Resources can then be shared across applications)

Data Binding Overview

The process that establishes a connection between the application UI and business logic.

Elements can be bound to data from a variety of data sources in the form of common language runtime (CLR) objects and XML.

Features: ContentControls such as Button and ItemsControls such as ListBox

and ListView have built-in functionality to enable flexible styling of single data items or collections of data items.

Sort, filter, and group views can be generated on top of the data. Basic Data Binding Concepts

Data Binding Overview

Direction of the Data Flow

What Triggers Source Updates

Animation Overview

Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last.

WPF includes an efficient timing system that is exposed through managed code and Extensible Application Markup Language (XAML) and that is deeply integrated into the WPF framework.

For a property to have animation capabilities, it must meet the following three requirements:

It must be a dependency property. It must belong to a class that inherits from

DependencyObject and implements the IAnimatable interface.

There must be a compatible animation type available. Controls such as Button and TabControl, and also Panel

and Shape objects inherit from DependencyObject.

Storyboards Overview

A Storyboard is a type of container timeline that provides targeting information for the timelines it contains.

A Storyboard can contain any type of Timeline, including other container timelines and animations.

Storyboard objects enable you to combine timelines that affect a variety of objects and properties into a single timeline tree, making it easy to organize and control complex timing behaviors.

How to Apply Animations with a Storyboard To use a Storyboard to organize and apply animations, you add

the animations as child timelines of the Storyboard. The Storyboard class provides the Storyboard.TargetName and Storyboard.TargetProperty attached properties. You set these properties on an animation to specify its target object and property.

Sample Code

Triggers Overview

Represents a trigger that applies property values or performs actions conditionally.Example:

WPF defines properties that correspond to end-user actions, such as the IsMouseOver property that is set to true when the user hovers the cursor over a UIElement or the corresponding IsMouseOver property of a ContentElement. Representing end-user actions in property values, along with the Trigger element, allows WPF styles to change property values based on those end-user actions, all from within markup.Sample Code

Styles and Templates Overview

Styling and templating refer to a suite of features (styles, templates, triggers, and storyboards) that allow an application, document, or user interface (UI) designer to create visually compelling applications and to standardize on a particular look for their product.

Trees in WPF

The Logical Tree: Why: Content models can readily iterate over their possible child

elements, and so that content models can be extensible. A framework for certain notifications, such as when all elements

in the logical tree are loaded. Resource references are resolved by looking upwards through

the logical tree for Resources collections on the initial requesting element and then parent elements.

Trees in WPF

The Visual TreeThe structure of visuals represented by the Visual

base class.When you write a template for a control, you are

defining or redefining the visual tree that applies for that control.

That event routes for a routed event mostly travel along the visual tree, not the logical tree.

For Lower-level control over drawing for performance and optimization reasons

Sample Code

Attached Events

A handler for a particular event to an arbitrary element rather than to an element that actually defines or inherits the event.

Sample Code:

Input System

Subsystem provides a powerful API for obtaining input from a variety of devices, including the mouse, keyboard, and stylus.

Where:UIElement, ContentElement, FrameworkElement, and FrameworkContentElement Plus the Keyboard class and Mouse classes

For example: The key down event is associated with the KeyDown and

PreviewKeyDown events. Preview events tunneling down the element tree from

the root element to the target element. Bubbling events bubbling up from the target element to

the root element.

Commanding Overview

Different from a simple event handler attached to a button or a timer that Commands separate the semantics and the originator of an action from its logic.

The semantics of the command are consistent across applications and classes, but the logic of the action is specific to the particular object acted upon.

Implement the ICommand. Example Code

Four Main Concepts in WPF Commanding The command: The action to be executed. The command source: The object which invokes the command. The command target: The object that the command is being executed on. The command binding: The object which maps the command logic to the command. The Paste command is the command, the MenuItem is the command source, the TextBox is

the command target, and the command binding is supplied by the TextBox control.

Commands By implementing the ICommand interface. ICommand exposes two methods, Execute, and CanExecute, and an

event, CanExecuteChanged. Similar to Routedevents, there are RoutedCommand 

Commanding Overview

Command Sources: The object which invokes the command Examples: MenuItem, Button, and KeyGesture. Implement the ICommandSource interface. ICommandSource exposes three properties: Command,

CommandTarget, and CommandParameter.CommandBinding:

Associates a command with the event handlers that implement the command.

The CommandBinding class contains a Command property, and PreviewExecuted, Executed, PreviewCanExecute, and CanExecute events.

Example CodeCommand Library ApplicationCommands, NavigationCommands, MediaCommands,

EditingCommands, and the ComponentCommands.Creating Custom Commands Example Code

References:

http://msdn.microsoft.com http://windowsclient.net http://www.wpftutorial.net http://joshsmithonwpf.wordpress.com http://idealprogrammer.com http://www.msdev.com http://www.wpfdev.com http://WPFpedia.com

A soft copy will be available at:

http://softarchitect.wordpress.com

For Future discussion, join

http://tech.groups.yahoo.com/group/SoftArchitect/

If you want to master a technology, start teaching it to others.