xaml overview


Published on

A short overview of XAML.

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

xaml overview

  1. 1. XAML Overview Markup for WPF and Silverlight Gaurav Goyal Janardan Chaudhary Nimesh Mishra Sanat Maharjan IOE Pulchwok Engineering College
  2. 2. WHAT IS XAML?
  3. 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. 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. 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. 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
  8. 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. 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. 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. 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. 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. 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. 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. 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
  17. 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 Content="Click me!"/> Button button=new Button(); button.Content="Click me!";  With XAML  With Code Behind
  18. 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. 19. XAML SYNTAX
  20. 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. 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. 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 <Ellipse> <Ellipse.RenderTransform> <RotateTransform Angle="45" CenterY="60" /> </Ellipse.RenderTransform> </Ellipse> A property element
  23. 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 <Border> <TextBox Width="300"/> </Border> <!-- Explicit equivalent --> <Border> <Border.Child> <TextBox Width="300"/> </Border.Child> </Border> A content property A property element
  24. 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. 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. 26. ATTACHED PROPERTIES – EXAMPLE • Using the Canvas.Left and Canvas.Top attached properties to position Ellipses • The default value is 0 26 <Canvas> <Ellipse Fill="Green" Width="80" Height="80"/> <Ellipse Canvas.Left="25" Canvas.Top="25" Fill="Red" Width="80" Height="80"/> <Ellipse Canvas.Left="50" Canvas.Top="50" Fill="Purple" Width="80" Height="80"/> </Canvas> <!-- The result is : -->
  27. 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. 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 <TextBox Name="TextBoxFrom"/> <TextBlock Text="{ Binding ElementName=TextBoxFrom, Path=Text}"/> Gets the Text from the TextBox
  29. 29. XAML CONTROLS • The controls are the smallest components of a XAML Application • Every control consists of • Appearance • Code-behind
  30. 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. 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. 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