WPF Architecture
What Is User Experience?
User Experience in Software?

Windows Vista

Ease of Use
Learn ability
Performance
Reliability
Security
Optimized form fac...
.NET At The Core
Windows Presentation Foundation

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

Designers design

Microsoft Tools for Designers &
Developers

With XAML designers &...
WPF Features
• Powerful Layout and Control Features of WPF
Applications
• Advanced Graphics and Text Features of WPF
Appli...
Powerful Layout and Control Features of
WPF Applications
•
•
•
•
•
•

Layout
Content Model
Lookless controls
Data binding
...
Advanced Graphics and Text Features of
WPF Applications
•
•
•
•
•

Controls support rich content
Vector graphics based eng...
WPF Document Features
•

Document Types:
– Fixed
– Flow

•

Document Controls and Text Layout:
–
–
–
–
–

•

DocumentViewe...
WPF Architectural Sketch
Windows Presentation Foundation
Services
• Base Services:
– XAML, Property System, Input & Eventing, Accessibility

• Medi...
WPF architecture
PresentationFramework
PresentationCore
Common Language Runtime
milcore
User32

DirectX
Kernel
Bases classes
•
•
•
•
•
•

System.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
S...
Diagram of Win32 rendering sequence
1 Invalidate

Application
3
GDI+ or GDI32

Graphics Card
Frame Buffer
For Screen

WM_P...
Diagram of WPF rendering sequence
Application
Visual
objects

WPF

Graphics Card
Frame Buffer
For Screen
Intelligent Redra...
What Is XAML?
• New declarative language for creating application user
interfaces
• XML-based representation of the object...
Simple XAML file
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas. micros...
Creating a Windows Presentation
Foundation Application: code-behind
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006...
Using inline code
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.micros...
Visual Tree
Stack
Panel

<StackPanel>

Stack
Panel

Stack
Panel

Stack
Panel

Border

Classic
BD

Classic
BD

Content
Pres...
Logical Tree
<DockPanel>
<LlstBox>

<ListBoxItem>Dog</ListBoxItem>
<ListBoxItem>Cat</ListBoxltem>
<ListBoxltem>Fish</ListB...
Helper classes
• VisualTreeHelper:
– GetParent
– GetChild
– HitTest

• LogicalTreeHelper
Questions?
Upcoming SlideShare
Loading in …5
×

Wpf architecture

713 views
649 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
713
On SlideShare
0
From Embeds
0
Number of Embeds
409
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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.”
  • 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.
  • 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.
  • Wpf architecture

    1. 1. WPF Architecture
    2. 2. What Is User Experience?
    3. 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. 4. .NET At The Core
    5. 5. Windows Presentation Foundation A productive, unified approach to UI, media and documents to deliver unmatched user experience
    6. 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. 7. WPF Features • Powerful Layout and Control Features of WPF Applications • Advanced Graphics and Text Features of WPF Applications • WPF Document Features
    8. 8. Powerful Layout and Control Features of WPF Applications • • • • • • Layout Content Model Lookless controls Data binding Styles Triggers
    9. 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. 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. 11. WPF Architectural Sketch
    12. 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. 13. WPF architecture PresentationFramework PresentationCore Common Language Runtime milcore User32 DirectX Kernel
    14. 14. Bases classes • • • • • • System.Threading.DispatcherObject System.Windows.DependencyObject System.Windows.Media.Visual System.Windows.UIElement System.Windows.FrameworkElement System.Windows.Controls.Control
    15. 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. 16. Diagram of WPF rendering sequence Application Visual objects WPF Graphics Card Frame Buffer For Screen Intelligent Redrawing WM_PAINT Windows
    17. 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. 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. 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. 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. 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. 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. 23. Helper classes • VisualTreeHelper: – GetParent – GetChild – HitTest • LogicalTreeHelper
    24. 24. Questions?

    ×