Wpf 1 hour overview

Windows Presentation Foundation

Arka BhattacharyaWindows Phone 7 Developerarkabhattacharya@student-

partners.com

User ExperienceArka Bhattacharya

MCP Asp.Net

• What Is UX ?

User experience is a term used to describe the overall experience and satisfaction a user has when using a product or system. It most commonly refers to a combination of software and business topics, such as selling over the web, but it applies to any result of interaction design

• Why UX ?

– Reducing excessive features which miss the needs of the user– Improving the overall usability of the system– Expediting design and development through detailed and

properly conceived guidelines– Incorporating business and marketing goals while catering to

the user

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

Usability Challenges

• Scalability• Visual Design• Comprehension• Interactivity• Change Management

User Experience Challenges

Requirement GuidelinesRequirement GuidelinesPattern ROI MetricsPattern ROI Metrics

UX Unrecognized AsUX Unrecognized AsTop-Level RequirementTop-Level Requirement

ROI Metrics EmergingROI Metrics Emerging

Development ComplexityDevelopment ComplexityIs A Central ChallengeIs A Central Challenge

.NET At The Core

Windows Presentation Foundation

• Deliver Innovative User Interfaces

• Increase Developer-Designer Productivity;

• Leveraging Existing Code Base and Skills Set

Superior UX with UI, Media & DocumentsSuperior UX with UI, Media & Documents

A productive, unified approach to UI, mediaA productive, unified approach to UI, mediaand documents to deliver unmatched UXand documents to deliver unmatched UX

Introducing WPF

Building & Deploying WPF Apps

WPF Architecture

Property Engine

Input / Eventin

g System

.NET Framework 2.0

Desktop Windows Manager

Media Integration Layer

DirectX

Windows Vista Display Driver (LDDM)

Windows Media Foundation

Composition Engine

Print Spooler

ManagedUnmanaged

Application Services

Deployment Services

Databinding

USER INTERFACE SERVICES

XAML

Accessibility

Property System

Input & Eventing

BASE SERVICES

DOCUMENT SERVICES

Packaging Services

XPS Documents

Animation

2D

3D

AudioImaging

Text

VideoEffects

Composition Engine

MEDIA INTEGRATION LAYER

Controls

LayoutW

ind

ow

s P

rese

nta

tion

Fo

un

da

tion

XP

S V

iew

er

Application Services

Deployment Services

Databinding

USER INTERFACE SERVICES

XAML

Accessibility

Property System

Input & Eventing

BASE SERVICES

DOCUMENT SERVICES

Packaging Services

XPS Documents

Animation

2D

3D

AudioImaging

Text

VideoEffects

Composition Engine

MEDIA INTEGRATION LAYER

Controls

Layout

WPF Architecture

Designer-Developer Productivity

• Microsoft Tools for Designer & Microsoft Tools for Designer & 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

Declarative Programming Through XAML

XAML = Extensive Application Markup LanguageXAML = Extensive Application Markup Language

•Easily toolable, declarative markup•Code and content are separate•Can be rendered in the browser / standalone application

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

XAML

Button b1 = new Button();b1.Content = "OK";b1.Background = new

SolidColorBrush(Colors.LightBlue);

b1.Width = 100;

C#

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _

SolidColorBrush(Colors.LightBlue)

b1.Width = 100

VB.NET

Developer-Designer Collaboration with XAML

Controls, Templates, Styles & Resources, Layouts, Animation

Animation, Triggers, Timelines

<StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent=“Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <BeginStoryboard.Storyboard> <Storyboard>

<ColorAnimation To="Yellow" Duration="0:0:0.5“ Storyboard.TargetName="TheBrush" Storyboard.TargetProperty="Color" />

<DoubleAnimation To="45" Duration="0:0:2" Storyboard.TargetName="LowerEllipseTransform" Storyboard.TargetProperty="Angle" /> ... </StackPanel.Triggers>

… remainder of contents of StackPanel, including x:Name'd TheBrush and LowerEllipseTransform …

</StackPanel>

UI Services

• Templates

• Layout

• Controls Library

• Styles and Resources

• Annotation

Templated Button

Form Factors & Hardware Acceleration

Sony VAIO U71 Toshiba M200 Toshiba 72MX195

• 6”

• 800 x 600

• 12”

• 1400 x 1050

• 72”

• PixelPure AT™

CPU GPU

2D Graphics, 3D Graphics, Imaging

3D Graphics3D Graphics

ClearType & Antialiasing

Sub-pixel positioning & natural widthsSub-pixel positioning & natural widths

<Border Width="400"

BorderBrush="Green"

BorderThickness="9">

<StackPanel>

<MediaElement Source="aero.wmv" />

<Button>Hello</Button>

</StackPanel>

</Border>

Audio & Video

• Formats: WMV, MPEG, Some AVIs• Can be synchronized with animations• Windows Media Foundation used to instantiate playback machinery

into a DirectShow graph

WPF Summary

Deliver Innovative User InterfacesDeliver Innovative User Interfaces

Increase Developer-Designer ProductivityIncrease Developer-Designer Productivity

Leverage Existing Code Base and Skill SetLeverage Existing Code Base and Skill Set

WPF Resources

• WPF/.NET Framework Community SitEhttp://wpf.netfx3.com

• Microsoft Expressionwww.microsoft.com/expression

SILVERLIGHT

Mail me

• [email protected]

© 2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.