WPF Architecture

What Is User Experience?

Ease of UseLearn ability

Performance

Reliability

Security

Optimized form factors

Legibility / Readability

Relevance / Contextualization

RichnessGraphics & Media

Data Visualization

Higher Fidelity Information

Globalization

Accessibility

Hardware & Printing

Integration

Measuring UX ROI(end user behaviors / benefits)

SuccessProductivity

RetentionComprehension

ConversionSatisfactionExcitementRepeat Use

User Experience in Software?User Experience in Software?

Windows VistaWindows Vista Office 2007Office 2007

.NET At The Core

Windows Presentation Foundation

A productive, unified approach to UI, A productive, unified approach to UI,

media and documents to deliver media and documents to deliver

unmatched user experienceunmatched user experience

Designer-Developer Productivity

• Microsoft Tools for Designers & Microsoft Tools for Designers & DevelopersDevelopers

• Declarative Programming through Declarative Programming through XAMLXAML

• Third Party Tools (e.g. Aurora by Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain)Mobiform, ZAM 3D by Electric Rain)Designers designDesigners design

With XAML designers & With XAML designers &

developers can streamline developers can streamline

their collaborationtheir collaboration

Developers add business logicDevelopers add business logic

WPF Features

• Powerful Layout and Control Features of WPF Applications

• Advanced Graphics and Text Features of WPF Applications

• WPF Document Features

Powerful Layout and Control Features of WPF Applications

• Layout• Content Model• Lookless controls• Data binding• Styles• Triggers

Advanced Graphics and Text Features of WPF Applications

• Controls support rich content• Vector graphics based engine• Image transformation: rotation, scale, etc.• Bitmap effects: shadow, blur, reflection, etc.• Animation and Video

WPF Document Features

• Document Types:– Fixed

– Flow

• Document Controls and Text Layout:– DocumentViewer

– FlowDocumentReader

– FlowDocumentPageViewer

– FlowDocumentScrollViewer

– TextBlock

• Document Packaging:– System.IO.Packaging: ZipPackage

– XML Paper Specification (XPS)

WPF Architectural Sketch

Windows Presentation Foundation Services

• Base Services: – XAML, Property System, Input & Eventing, Accessibility

• Media Services: – 2D, 3D, Audio, Video, Text, Imaging, Animation, Effects,

Composition Engine

• Document Services: – XPS Documents, Open Packaging Conventions

• User Interface Services: – Application Services, Deployment, Controls, Layout, Data

Binding

WPF architecture

PresentationFramework

PresentationCore

Common Language Runtime

milcore

Kernel

DirectXUser32

Bases classes

• System.Threading.DispatcherObject• System.Windows.DependencyObject • System.Windows.Media.Visual• System.Windows.UIElement• System.Windows.FrameworkElement • System.Windows.Controls.Control

Diagram of Win32 rendering sequence

Application

GDI+ or GDI32

Windows

Graphics CardFrame BufferFor Screen

WM_PAINT

Image data only retained for as long as it remains visible on screen

1 Invalidate

2

3Repaint requests sent by

OS whenever window invalidated

Diagram of WPF rendering sequence

Application

WPF Windows

Graphics CardFrame BufferFor Screen

Visual objects

WM_PAINT

Intelligent Redrawing

What Is XAML?

• New declarative language for creating application user interfaces

• XML-based representation of the object model• Every XAML tag corresponds directly to a .NET

Framework class• Each XAML file includes the following elements:

– Root element– http://schemas.microsoft.com/winfo/2006/xaml/presentation and– http://'schemas.microsoft.com/winfx/2006/xaml– Properties– Name property

Simple XAML file

<Canvas

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas. microsoft, com/winfx/2006/xaml“

><Button Name ="MyButton" Background ="Blue">Hello World!</Button>

</Canvas>

Creating a Windows Presentation Foundation Application: code-behind

<Canvasxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="My Namespace. MyCanvasCode"><Button Click="Button_Click">Hello World!</Button></Canvas>

namespace MyNamespace{

public partial class MyCanvasCode : Canvas{

void Button_Click(object sender, RoutedEventArgs e){

Button b = e.Source as Button;b.Background = Brushes.Red;

}}

}

Using inline code

<Canvasxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Button Name="buttonl" Click="Clicked">Hello World!</Button><x:Code>

<![CDATA[void Clicked(object sender, RoutedEventArgs e){

buttonl.Background = Brushes.Red;}

]]></x:Code>

</Canvas>

Visual Tree

<StackPanel><Label>user name:</Label>

<TextBox />

<Button Click="OnClick">

OK

</Button>

</StackPanel>

StackPanel

Label TextBox Button

StackPanel

StackPanel

StackPanel

StackPanel

ClassicBD

ContentPres

TextBlock

ClassicBD

ScrolVwr

Grid

Border

ContentPres

TextBlock

ScrollCPres

ScrBarMin

ScrBarMin

AdornLayer

TextBlock

Logical Tree

<DockPanel><LlstBox>

<ListBoxItem>Dog</ListBoxItem>

<ListBoxItem>Cat</ListBoxltem>

<ListBoxltem>Fish</ListBoxltem> </ListBox>

<Button Click="OnClick">OK</Button>

</DockPanel>

ButtonListBox

DockPanel

ListBoxItem(Dog)

ListBoxItem(Cat)

ListBoxItem(Fish)

Helper classes

• VisualTreeHelper:– GetParent– GetChild– HitTest

• LogicalTreeHelper

Questions?