![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>](https://image.slidesharecdn.com/wpfarchitecture-131216060300-phpapp01/85/Wpf-architecture-20-320.jpg)
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)
- 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
- 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
- 23. Helper classes • VisualTreeHelper: – GetParent – GetChild – HitTest • LogicalTreeHelper
- 24. Questions?
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.