Introduction to XAML and WPF

8,399 views

Published on

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

No Downloads
Views
Total views
8,399
On SlideShare
0
From Embeds
0
Number of Embeds
708
Actions
Shares
0
Downloads
597
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * (c) 2008 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * (c) 2008 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • Introduction to XAML and WPF

    1. 1. Introduction to WPF Next Generation for Desktop Applications <ul><li>Doncho Minkov </li></ul><ul><li>Telerik School Academy </li></ul><ul><li>schoolacademy.telerik.com </li></ul><ul><li>Technical Trainer </li></ul><ul><li>http://www.minkov.it </li></ul>
    2. 2. Table of Contents <ul><li>Windows Presentation Foundation (WPF)? </li></ul><ul><li>WPF basic features </li></ul><ul><li>WPF and other UI technologies </li></ul><ul><ul><li>Windows Forms </li></ul></ul><ul><ul><li>DirectX </li></ul></ul><ul><ul><li>Silverlight </li></ul></ul><ul><ul><li>HTML + CS S </li></ul></ul><ul><li>WPF classes </li></ul><ul><li>XAML basics </li></ul>
    3. 3. What is Windows Presentation Foundation?
    4. 4. What is Windows Presentation Foundation? <ul><li>Windows Presentation Foundation (WPF) </li></ul><ul><ul><li>An entirely new graphical display system for Windows </li></ul></ul><ul><ul><li>Empowers rich-media applications </li></ul></ul><ul><ul><li>Provides a clear separation between the UI (XAML) and the business logic (C#,VB.NET) </li></ul></ul><ul><ul><li>Influenced by modern display technologies such as HTML , CSS and Flash </li></ul></ul><ul><ul><li>Hardware-accelerated </li></ul></ul>
    5. 5. WPF B asic F eatures
    6. 6. V ector G raphics <ul><li>All WPF graphics are Direct3D applications </li></ul><ul><ul><li>Direct3D (part of DirectX) is used in graphical applications where performance is important </li></ul></ul><ul><ul><li>Uses the video card hardware for rendering </li></ul></ul><ul><ul><li>The result: high-quality rich-media UI </li></ul></ul><ul><li>Vector-based graphics allows to scale without loss of quality </li></ul><ul><li>WPF implements a floating-point logical pixel system and supports 32-bit ARGB color </li></ul>
    7. 7. R ich T ext M odel <ul><li>WPF includes a number of extremely rich typographic and text rendering features </li></ul><ul><ul><li>Some of them were not available in GDI </li></ul></ul><ul><li>B uilding international fonts from composite fonts </li></ul><ul><li>WPF text rendering takes advantage of ClearType technology </li></ul><ul><ul><li>Use caching of pre-rendered text in the video memory </li></ul></ul><ul><ul><li>WPF has resolution-independent architecture </li></ul></ul>
    8. 8. A nimation <ul><li>WFP supports time-based animations </li></ul><ul><ul><li>Presentation timers are initialized and managed by WPF </li></ul></ul><ul><ul><li>Scene changes coordinated by using a storyboard </li></ul></ul><ul><li>Animations can be triggered </li></ul><ul><ul><li>By other external events </li></ul></ul><ul><ul><ul><li>Including user action </li></ul></ul></ul><ul><li>Animation can be defined on a per-object basis directly from the XAML markup </li></ul>
    9. 9. A udio and V ideo S upport <ul><li>WPF can incorporate audio and video into a user interface </li></ul><ul><li>Audio support in WPF is a thin layer over the existing functionality in Win32 and WMP </li></ul><ul><li>WPF supports the video in formats WMV, MPEG and some AVI files </li></ul><ul><li>Relationship between video and animation is also supported </li></ul><ul><ul><li>They are both ways of showing moving images </li></ul></ul><ul><ul><li>Animation can be synchronized with media </li></ul></ul>
    10. 10. S tyles and T emplates <ul><li>In WPF a style is a set of properties applied to content used for visual rendering </li></ul><ul><ul><li>Similar to the concept of CSS </li></ul></ul><ul><ul><li>E.g. setting the font weight of a Button control </li></ul></ul><ul><li>Use them to standardize non-formatting characteristics </li></ul><ul><li>WPF styles have specific features for building applications </li></ul><ul><ul><li>Ability to apply different visual effects based on user events </li></ul></ul>
    11. 11. S tyles and T emplates (2) <ul><li>T emplates in WPF allow you to fully change the UI of anything in WPF </li></ul><ul><li>K inds of t emplates available within WPF </li></ul><ul><ul><li>ControlTemplate </li></ul></ul><ul><ul><li>ItemsPanelTemplate </li></ul></ul><ul><ul><li>DataTemplate </li></ul></ul><ul><ul><li>HierarchicalDataTemplate </li></ul></ul>
    12. 12. C ommands <ul><li>Commands are more abstract and loosely-coupled version of events </li></ul><ul><ul><li>Examples: copy, cut, paste, save, etc. </li></ul></ul><ul><li>WPF support for commands reduces the amount of code we need to write </li></ul><ul><li>It gives us more flexibility to change the UI without breaking the back-end logic </li></ul><ul><li>Commands have action, source, target and binding </li></ul>
    13. 13. C ommands (2) <ul><li>The power of commands comes from the following three features </li></ul><ul><ul><li>WPF defines a number of built-in commands </li></ul></ul><ul><ul><li>Commands have automatic support for input actions </li></ul></ul><ul><ul><li>Some WPF controls have built-in behavior tied to various commands </li></ul></ul><ul><li>Commands are intended to do two things: </li></ul><ul><ul><li>Check whether an action is available </li></ul></ul><ul><ul><li>Execute an action </li></ul></ul>
    14. 14. D eclarative UI with XAML <ul><li>WPF introduces a new XML-based language for describing UI elements known as XAML </li></ul><ul><ul><li>XAML = eXtensible Application Markup Language </li></ul></ul><ul><li>XAML is a completely declarative language </li></ul><ul><ul><li>A declarative language says &quot;what&quot; </li></ul></ul><ul><ul><li>An imperative language says &quot;how&quot; </li></ul></ul><ul><li>XAML describes the behavior and integration of components (in most cases UI components) </li></ul>
    15. 15. O bject- B ased D rawing <ul><li>At the lower-level WPF works in terms of shapes , not in terms of painting pixels </li></ul><ul><ul><li>Shapes are vector-based and can easily scale </li></ul></ul><ul><li>Developers create shape objects and let WPF maintain the display in the most optimized way </li></ul><ul><ul><li>WPF provides a number of ready-to-use shape objects like line, rectangle, ellipse, path, etc. </li></ul></ul><ul><li>Shape objects can be used inside panels and inside most WPF controls </li></ul>
    16. 16. WPF a nd O ther UI T echnologies
    17. 17. Windows Forms <ul><li>Windows Forms is the culmination of the display technology built on GDI+ and User32 </li></ul><ul><ul><li>It’s more mature than WPF </li></ul></ul><ul><ul><li>Has solid limitations </li></ul></ul><ul><ul><li>No separation between UI and the C# code </li></ul></ul><ul><li>WPF is the platform for the future of Windows development </li></ul><ul><ul><li>Based on DirectX and Direct3D </li></ul></ul><ul><ul><li>Separation between the UI and C# code </li></ul></ul>
    18. 18. DirectX <ul><li>WPF create multimedia applications with real-time graphics </li></ul><ul><ul><li>Such as complex physics-based simulators or cutting-edge action games </li></ul></ul><ul><li>WPF applications are DirectX applications </li></ul><ul><ul><li>As a result, even the most mundane business applications can use rich effects and antialiasing </li></ul></ul><ul><li>WPF graphics is entirely vector-based </li></ul><ul><ul><li>This allows zoom-in / soom-out with no loss of quality </li></ul></ul>
    19. 19. Silverlight <ul><li>Silverlight is a cross-platform, cross-browser plugin, which contains WPF-based technology </li></ul><ul><ul><li>Rich Internet Application (RIA) platform </li></ul></ul><ul><ul><li>Including XAML and subset of WPF </li></ul></ul><ul><ul><li>Provides rich-media features such as video, vector graphics, and animations </li></ul></ul><ul><li>Silverlight and WPF share the XAML presentation layer </li></ul><ul><ul><li>Both technologies are similar, but Silverlight is limited in many aspects </li></ul></ul>
    20. 20. HTML + CSS vs. XAML + Styles <ul><li>Cascading Style Sheets (CSS) is a stylesheet language </li></ul><ul><ul><li>Used to describe the presentation of information in HTML documents </li></ul></ul><ul><li>XAML elements have Style property </li></ul><ul><ul><li>Similar to CSS (as a concept) </li></ul></ul><ul><li>The HTML and XAML are tag based systems to describe UI </li></ul><ul><ul><li>XAML is more powerful in many aspects </li></ul></ul>
    21. 21. XAML Basics
    22. 22. XAML Basics <ul><li>XAML is an XML-based language for creating and initializing .NET objects </li></ul><ul><ul><li>It’s used in WPF as a human-authorable way of describing the UI </li></ul></ul><ul><ul><li>Used to separate the UI from the C# code </li></ul></ul><ul><li>XAML contains a hierarchy of elements representing visual objects </li></ul><ul><ul><li>These objects are known as user interface elements or UI elements </li></ul></ul>
    23. 23. Elements and Attributes <ul><li>UI elements have a set of common properties and functions </li></ul><ul><ul><li>Such as Width , Height , Cursor , and Tag properties </li></ul></ul><ul><li>Declaring an XML element in XAML </li></ul><ul><ul><li>Equivalent to instantiating the object via a parameterless constructor </li></ul></ul><ul><li>Setting an attribute on the object element </li></ul><ul><ul><li>Equivalent to setting a property of the same name </li></ul></ul>
    24. 24. XAML Basics - Example <ul><li>Constructs button with caption &quot;OK&quot; </li></ul><Window x:Class=&quot;MyFirstWpfApp.MainWindow&quot; xmlns= &quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; xmlns:x= http://schemas.microsoft.com/winfx/2006/xaml Title=&quot;Hello, WPF&quot; Height=&quot;300&quot; Width=&quot;300&quot;> <Button x:Name=&quot;button&quot; Width=&quot;200&quot; Height=&quot;25&quot;>OK</Button> </Window>
    25. 25. Example – E xplanation <ul><li>The root element, Window is used to declare a portion of a class </li></ul><ul><li>The two XML namespace declarations pull in two commonly used namespaces </li></ul><ul><ul><li>The one for XAML itself </li></ul></ul><ul><ul><li>The one for WPF </li></ul></ul><ul><li>Width , Height , Title are the XAML properties </li></ul>
    26. 26. XAML Syntax Live Demo
    27. 27. What is XAML?
    28. 28. What is XAML? <ul><li>e X tensible A pplication M arkup L anguage </li></ul><ul><li>XAML is a declarative markup language </li></ul><ul><ul><li>Used to simplify creation of UI for a .NET apps </li></ul></ul><ul><ul><li>Separates UI and Business logic </li></ul></ul><ul><li>XAML enables a workflow where different parties can work simultaneously </li></ul><ul><ul><li>The UI and the logic of an application can be developed using different tools (VS and Blend) </li></ul></ul>
    29. 29. What is XAML? (2) <ul><li>XAML is an XML-based language for creating and initializing .NET objects </li></ul><ul><ul><li>It’s used in WPF and Silverlight as a human-authorable way of describing the UI </li></ul></ul><ul><ul><li>Used to separate the UI from the C# code </li></ul></ul><ul><li>XAML contains a hierarchy of elements representing visual objects </li></ul><ul><ul><li>These objects are known as user interface elements or UI elements </li></ul></ul>
    30. 30. D eclarative UI with XAML <ul><li>XAML introduces a new XML-based language for describing UI elements known as XAML </li></ul><ul><ul><li>XAML = eXtensible Application Markup Language </li></ul></ul><ul><li>XAML is a completely declarative language </li></ul><ul><ul><li>A declarative language says &quot;what&quot; </li></ul></ul><ul><ul><li>An imperative language says &quot;how&quot; </li></ul></ul><ul><li>XAML describes the behavior and integration of components (in most cases UI components) </li></ul>
    31. 31. Property Elements
    32. 32. Property Elements <ul><li>Not all properties have just a string value </li></ul><ul><ul><li>Some must be set to an instance of an object </li></ul></ul><ul><li>XAML provide syntax for setting complex property values, called property elements </li></ul><ul><ul><li>Take the form TypeName.PropertyName contained inside an TypeName element </li></ul></ul><Ellipse> <Ellipse.RenderTransform> <RotateTransform Angle=&quot;45&quot; CenterY=&quot;60&quot; /> </Ellipse.RenderTransform> </Ellipse> A property element
    33. 33. Property Elements Live Demo
    34. 34. Declarative vs. Programmatically? Why we need XAML?
    35. 35. Declarative vs. Programmatically <ul><li>In WPF/Silverlight each element can be done either declaratively or programmatically </li></ul><ul><ul><li>No difference in the execution and speed </li></ul></ul><ul><ul><ul><li>Instantiating element from the code behind ruins the idea of XAML </li></ul></ul></ul><ul><ul><ul><li>The same as Windows Forms </li></ul></ul></ul><ul><li>The following two examples are identical </li></ul><Button Content=&quot;Click me!&quot;/> Button button=new Button(); button.Content=&quot;Click me!&quot;; <ul><ul><li>With XAML </li></ul></ul><ul><ul><li>From Code Behind </li></ul></ul>
    36. 36. Declarative UI <ul><li>When not using XAML with WPF/Silverlight </li></ul><ul><ul><li>Miss the idea of separation of concerns </li></ul></ul><ul><ul><li>Two parties cannot work simultaneously on the same file </li></ul></ul><ul><li>What happens when making object declaratively? </li></ul><ul><ul><li>It is the same as instantiating the element with parameterless constructor </li></ul></ul><ul><ul><li>All the magic happens in InitializeComponents() </li></ul></ul>
    37. 37. WPF vs. Windows Forms <ul><li>Windows Forms </li></ul><ul><ul><li>Framework to design applications with GUI </li></ul></ul><ul><ul><li>Does the same job as WPF </li></ul></ul><ul><ul><li>Everything is in one place </li></ul></ul><ul><ul><li>Much like java's swings (by concept) </li></ul></ul><ul><li>Windows Presentation Foundation (WPF) </li></ul><ul><ul><li>Separate UI and Business Logic </li></ul></ul><ul><li>Why change the concept of the UI? </li></ul><ul><ul><li>In Windows Forms all the code is in one place </li></ul></ul><ul><ul><ul><li>Harder for front-end and back-end developers </li></ul></ul></ul>
    38. 38. Declarative or Programmatically? Live Demo
    39. 39. Introduction to XAML

    ×