xaml overview

  • View

  • Download

Embed Size (px)


A short overview of XAML.

Text of xaml overview

  • 1. XAML Overview Markup for WPF and Silverlight Gaurav Goyal Janardan Chaudhary Nimesh Mishra Sanat Maharjan IOE Pulchwok Engineering College

2. WHAT IS XAML? 3. WHAT IS XAML? Stands for eXtensible Application Markup Language Declarative markup language for building UI Based on XML Used to simplify creation of UI for a .NET apps Separates presentation (UI) from business logic XAML enables a workflow where different parties can work simultaneously The UI and the logic of an application can be developed using different tools (VS and Blend) 4. DECLARATIVE UI WITH XAML XAML is a completely declarative language A declarative language says "what" An imperative language says "how" XAML describes the behavior and integration of components (in most cases UI components) Cannot describe business logic 5. HISTORY OF XAML Introduced in 2006 with .NET 3.0 With Windows Presentation Foundation (WPF) WPF is "the new way" to create desktop apps Successor of Windows Forms Silverlight is introduced in 2007 Under the name WPF/E - WPF Everywhere Used JavaScript for back-end Windows Runtime (WinRT) introduced in 2011 Used for Windows Store apps Closer to Silverlight than WPF 6. XAML-RELATED TECHNOLOGIES Windows Presentation Foundation - WPF The successor of Windows Forms Uses XAML to describe the presentation (UI) C# / VB.NET for the back-end logic Silverlight Develop RIA in collaboration with ASP.NET Browsers need a Silverlight plugin Windows Runtime - WinRT Build Windows Store apps in Windows 8 7. XAML FEATURES 8. VECTOR GRAPHICS All XAML graphics are Direct3D applications Direct3D (part of DirectX) is used in graphical applications where performance is important Uses the video card hardware for rendering The result: high-quality rich-media UI Vector-based graphics allow lossless scaling XAML implements a floating-point logical pixel system and supports 32-bit ARGB color 9. ANIMATION XAML supports time-based animations Presentation timers are initialized and managed by XAML Scene changes are coordinated using a storyboard Animations can be triggered by external events Including user action or events Animation can be defined on a per-object basis directly from the XAML markup 10. AUDIO AND VIDEO SUPPORT XAML can incorporate audio and video into a user interface Audio support in XAML is a thin layer over the existing functionality in Win32 and WMP XAML supports the videos formats that the OS supports i.e. if WMP can play a file XAML can too Relationship between video and animation is also supported They are both ways of showing moving images Animation can be synchronized with media 11. STYLES In XAML a style is a set of properties applied to the content used for visual rendering Similar to the concept of CSS Use them to standardize non-formatting characteristics XAML styles have specific features Ability to apply different visual effects based on user events Styles are created using MS Expression Blend 11 12. TEMPLATES Templates in XAML allow you to fully change the UI of anything in XAML Different templates available within XAML ControlTemplate Manages the visualization of a control ItemsPanelTemplate Handles the visualization panel of list control DataTemplate and HierarchicalDataTemplate Responsible for the visualization of items in list controls 12 13. COMMANDS Commands are more abstract and loosely- coupled version of events Examples: copy, cut, paste, save, etc. XAML support for commands reduces the amount of code we need to write It gives us more flexibility to change the UI without breaking the back-end logic Commands have action, source, target and binding 13 14. COMMANDS (2) The power of commands: XAML defines a number of built-in commands Commands have automatic support for input actions Some XAML controls have built-in behavior tied to various commands Commands are intended to do two things: Check whether an action is available Execute an action 14 15. OBJECT-BASED DRAWING At the lower-level XAML works in terms of shapes, not in terms of painting pixels Shapes are vector-based and are easily scaled Developers create shape objects and let XAML maintain the view in the most optimized way XAML provides a number of ready-to-use shape objects like line, rectangle, ellipse, path, etc. Shape objects can be used inside panels and inside most XAML controls 15 16. DECLARATIVE VS. PROGRAMMATICALLY? Why we need XAML? 17. DECLARATIVE VS. PROGRAMMATICALLY With XAML each element can be done either declaratively or programmatically No difference in the execution or performance Instantiating element from the code behind ruins the idea of XAML The same as Windows Forms The following two examples are identical Button button=new Button(); button.Content="Click me!"; With XAML With Code Behind 18. DECLARATIVE UI When not using XAML with WPF/Silverlight Miss the idea of separation of concerns Two parties cannot work simultaneously on the same file What happens when making object declaratively? It is the same as instantiating the element with parameterless constructor All the magic happens in InitializeComponents() 19. XAML SYNTAX 20. XAML SYNTAX XAML stands for eXtensible Application Markup Language i.e. uses syntax that is actually pure XML Very similar to HTML Meant to build applications' UI Briefly XAML consists of Elements Properties Elements may have properties 21. ELEMENTS AND ATTRIBUTES UI elements have a set of common properties and functions Such as Width, Height, Cursor, and Tag properties Declaring an XML element in XAML Equivalent to instantiating the object via a parameterless constructor Setting an attribute on the object element Equivalent to setting a property with the same name Elements and attributes are case sensitive The attributes can be enclosed in single quotes (') or double quotes (") 22. PROPERTY ELEMENTS Not all properties have just a string value Some must be set to an instance of an object XAML provide syntax for setting complex property values, called property elements Take the form TypeName.PropertyName contained inside an TypeName element 22 A property element 23. CONTENT PROPERTIES One of the element's properties is default Known as content property Typically contains the child elements Content properties are used without prefix: 23 A content property A property element 24. ATTACHED PROPERTIES Attached properties are special kind of properties Can be attached to any object Not just the one defining the property The syntax is the same as setting a normal property The property must be prefixed with the name of the element defining the property and a dot 24 25. ATTACHED PROPERTIES (2) Attached properties allow common behavior to be applied to arbitrary elements Allow a child item to access a property of its parent item The base of Attached Behavior Commonly used attached properties: Canvas.Left and Canvas.Right Grid.Row, Grid.Column and Grid.Rowspan 25 26. ATTACHED PROPERTIES EXAMPLE Using the Canvas.Left and Canvas.Top attached properties to position Ellipses The default value is 0 26 27. DEPENDENCY PROPERTIES A Dependency Properties are properties that extend the functionality of a common language runtime (CLR) property Interact with properties directly and never know that they are implemented as a dependency property The purpose of dependency properties is to provide a way to compute the value of a property based on the value of other inputs 28. DEPENDENCY PROPERTIES (2) A Dependency Property can be implemented to provide Self-contained validation Default values Callbacks that monitor changes to other properties Example of Dependency Properties Text property of TextBlock Gets the Text from the TextBox 29. XAML CONTROLS The controls are the smallest components of a XAML Application Every control consists of Appearance Code-behind 30. XAML CONTROL XAML Controls are typically not directly responsible for their own appearance XAML Controls are all about behavior They defer to templates to provide their visuals 31. XAML CONTROLS (2) Controls may use commands to represent supported operations Controls offer properties to provide a means of modifying either behavior Controls raise events when something important happens XAML provides a range of built-in controls Most of these correspond to standard Windows control types 32. ADVANTAGES OF XAML XAML code is short and clear to read Separation of designer code and logic Graphical design tools like Expression Blend require XAML as source. The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer