1. WPF Architecture

2. What Is User Experience?

3. 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

4. .NET At The Core

5. Windows Presentation Foundation
A productive, unified approach to UI,
media and documents to deliver
unmatched user experience

6. 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

7. WPF Features
• Powerful Layout and Control Features of WPF
Applications
• Advanced Graphics and Text Features of WPF
Applications
• WPF Document Features

8. Powerful Layout and Control Features of
WPF Applications
•
•
•
•
•
•
Layout
Content Model
Lookless controls
Data binding
Styles
Triggers

9. 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

10. 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)

11. WPF Architectural Sketch

12. 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

13. WPF architecture
PresentationFramework
PresentationCore
Common Language Runtime
milcore
User32
DirectX
Kernel

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

15. 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

16. Diagram of WPF rendering sequence
Application
Visual
objects
WPF
Graphics Card
Frame Buffer
For Screen
Intelligent Redrawing
WM_PAINT
Windows

17. 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

18. 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>

19. 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;
}
}
}

20. 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>

21. 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

22. 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)

23. Helper classes
• VisualTreeHelper:
– GetParent
– GetChild
– HitTest
• LogicalTreeHelper

24. Questions?