A short overview of XAML.

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 Content="Click me!"/> 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
<Ellipse>
<Ellipse.RenderTransform>
<RotateTransform Angle="45" CenterY="60" />
</Ellipse.RenderTransform>
</Ellipse>
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
<Border>
<TextBox Width="300"/>
</Border>
<!-- Explicit equivalent -->
<Border>
<Border.Child>
<TextBox Width="300"/>
</Border.Child>
</Border>
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
<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. 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
<TextBox Name="TextBoxFrom"/>
<TextBlock Text="{
Binding ElementName=TextBoxFrom, Path=Text}"/>
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