KEMBAR78
Wpf architecture | PPT
WPF Architecture
What Is User Experience?
User Experience in Software?

Windows Vista

Ease of Use
Learn ability
Performance
Reliability
Security
Optimized form factors
Legibility / Readability
Relevance / Contextualization

Office 2007

Measuring UX ROI
(end user behaviors / benefits)

Success
Productivity
Retention
Comprehension
Conversion
Satisfaction
Excitement
Repeat Use

Richness
Graphics & Media
Data Visualization
Higher Fidelity Information
Globalization
Accessibility
Hardware & Printing
Integration
.NET At The Core
Windows Presentation Foundation

A productive, unified approach to UI,
media and documents to deliver
unmatched user experience
Designer-Developer Productivity
•
•
•

Designers design

Microsoft Tools for Designers &
Developers

With XAML designers &
Declarative Programming through
XAML
developers can streamline
their collaboration
Third Party Tools (e.g. Aurora by
Mobiform, ZAM 3D by Electric Rain)
Developers 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
User32

DirectX
Kernel
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
1 Invalidate

Application
3
GDI+ or GDI32

Graphics Card
Frame Buffer
For Screen

WM_PAINT

2

Windows

Repaint requests sent by
OS whenever window
invalidated

Image data only retained for
as long as it remains visible on
screen
Diagram of WPF rendering sequence
Application
Visual
objects

WPF

Graphics Card
Frame Buffer
For Screen
Intelligent Redrawing

WM_PAINT

Windows
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
<Canvas
xmlns="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
<Canvas
xmlns="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
Stack
Panel

<StackPanel>

Stack
Panel

Stack
Panel

Stack
Panel

Border

Classic
BD

Classic
BD

Content
Pres

Scrol
Vwr

Content
Pres

Grid

Text
Block

<Label>user name:</Label>
<TextBox />
<Button Click="OnClick">
OK
</Button>

Text
Block
Scroll
CPres
Text
Block

Stack
Panel

ScrBar
Min

</StackPanel>

ScrBar
Min

Adorn
Layer

Label

TextBox

Button
Logical Tree
<DockPanel>
<LlstBox>

<ListBoxItem>Dog</ListBoxItem>
<ListBoxItem>Cat</ListBoxltem>
<ListBoxltem>Fish</ListBoxltem>
</ListBox>
<Button Click="OnClick">OK</Button>

</DockPanel>

ListBoxItem
(Dog)

DockPanel
ListBox
ListBoxItem
(Cat)

Button
ListBoxItem
(Fish)
Helper classes
• VisualTreeHelper:
– GetParent
– GetChild
– HitTest

• LogicalTreeHelper
Questions?

Wpf architecture

Editor's Notes

  • #3 User experience is more than “looks”. User experience represents the overall interaction process of the user with an object. This interaction provides the user with an added value benefit. In this case the benefit that both tools offer is “opening a can”. However it is evident that the can opener will provide the user with a better overall user experience on obtaining the benefit. It is more secure, easier to use and can achieve the benefit faster than the knife. Let’s take this example even further. What is the difference between 2 cars - a 10K car and a 40K BMW? Both take you from point A to point B. There’s a world of difference. For one, the BMW has a much superior user experience (styling, handling, performance, etc.) In addition, notice that a BMW offers its owners an emotional connection, a “pride of ownership.” This gives BMW a unique brand in the eyes of its owners, and to the millions of potential owners who dream of buying this car some day! This shows us that user experience has tremendous business value – ability to differentiate products, create brand awareness, and customer satisfaction.
  • #4 We say earlier how user experience is so common-place in consumer goods. Yet, when it comes to software, we are happy to live with “good enough” experiences. When was the last time you had a very satisfying experience with your software, where you thought to yourself “I Love my Software.” Is this because user experience in software does NOT matter? Microsoft firmly believes that user experience in software does matter. Even with our own products, such as Windows Vista and Microsoft Office 2007, Microsoft is delivering software with amazing user experience. User Experience (UX) matters because it helps end-users use products in an easy way (easy to use, relevant, secure, etc.). The things that make a software have a good UX is richness, data viz, globalization, accessibility, etc. UX can be easily measured based on success of usage, productivity, retention, comprehension, and so on.
  • #5 In 2001, we introduced .NET Framework. In Nov 2005, we released .NET Framework 2.0. Yet, there was a need to offer our customers additional functionality, such as better user experience in software and workflow. With Windows Vista, we are introducing Microsoft® .NET Framework 3.0 (formerly named WinFX). .NET Framework 3.0 builds upon .NET Framework 2.0, with additional capabilities, such as Windows Presentation Foundation (WPF), Windows Communication Foundation (WCF), Windows Workflow Foundation (WF), and “Infocard.”
  • #6 Windows Presentation Foundation (WPF) is a productive, unified approach to UI, Media, and Documents that you can use to deliver unmatched user experiences to your customers.
  • #7 If user experience matters, design matters. If design matters, designers matter. If designers matter, we need to make designers first class citizens of the traditional software development process. Let’s talk about how Microsoft is unlocking Developer and Designer collaboration and is empowering them to create successful UX software applications. 1) Traditionally designers would “mockup” the graphic design for a software application. Then by any means possible designers would deliver this “looks” to the developer… they would use JPG images, PNGs, PSDs or even Powerpoint presentations to express the designer intention. Then the developer would receive this “static images” and would try to convert that into reality. If the designer created some “non standard” controls, the developer was forced to code in GDI+ or other complex technologies to create the control raising the time and budget to such level that it was simply better to take the decision of making the UI more “standard”. The developer trying to recreate the idea of the designer would deliver something like what is shown on the right side of the screen. As you can see it represents only a tiny bit of the original vision. 2) In order to enable the collaboration between developers and designers, Microsoft has created XAML. XAML is the format which integrates the development process and is the way for both developers and designers to access the functionalities of WPF. As you can see we have no middle man anymore. XAML is generated by the designer, XAML is consumed by the developer. Further more, the workflow is now two-way meaning that the development process can also start from the developer side who creates XAML and then delivers this XAML to the designer which can take it and style it or completely redesign its appearance. 3) As a brief sample this are the tools that enable this kind of process: On the designer side we have Expression and on the Developer side we have Visual Studio.