Home > DeveloperSection > Blogs > XAML Overview

XAML Overview

0 Comment(s)
 2158  View(s)
Rate this:

XAML Overview

What is XAML?

Extensible Application Markup Language, or XAML (pronounced as ‘zammel’), is an XML-based markup language developed by Microsoft. Although it was originally invented for WPF it can be used to create any kind of object trees. XAML is the language behind the visual presentation of an application that you develop in Microsoft Expression Blend, just as HTML is the language behind the visual presentation of a Web page. Creating an application in Expression Blend means writing XAML code either by hand or visually by working in the Design view of Expression Blend.

Note: You do not need to understand XAML to create applications in Expression Blend if you work in Design view. For more information, see Editing XAML by using Design view in Expression Blend in the topic Editing XAML in this User Guide.

You can export art assets from Microsoft Expression Design 2 as XAML, and then import the XAML into your Expression Blend project. Some other design applications have tools that can convert art assets to XAML. You can search on the Internet for conversion tools that are posted on trusted sites.

Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF and for electronic paper in the XPS standard. All classes in WPF have parameter less constructors and make excessive usage of properties. That is done to make it perfectly fit for XML languages like XAML.

Advantages of XAML:

All you can do in XAML can also be done in code. XAML is just another way to create and initialize objects. You can use WPF without using XAML. It’s on you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages:

1.       XAML code is short and clear to read

2.       Separation of designer code and logic

3.       Graphical design tools like Expression Blend require XAML as source.

4.       The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.

XAML VS Code Writing:

XAML is different in some manner with Code writing such as:

1.       Precise code format

2.       Properties as elements

3.       Implicit type conversion

4.       Markup extensions

5.       Namespaces

Let’s have a brief idea about these components which are defined above.

1.     Precise code format:

XAML is used precise code format in comparison to manual code writing. Suppose that we want to draw a stack panel, we could draw it by using XAML


    <TextBlock Margin="5">MindStick XAML Section</TextBlock>

    <Button Margin="5" HorizontalAlignment="Left">Ok</Button>


And by using Code we have:

// Create the StackPanel

StackPanel stckPanel = new StackPanel();

this.Content = stckPanel;

// Create the TextBlock

TextBlock txtBlock = new TextBlock();

txtBlock.Margin = new Thickness(10);

txtBlock.Text = "MindStick XAML Section";


 // Create the Button

Button btnOk = new Button();

btnOk.Margin= new Thickness(20);

btnOk.Content = "OK";


So from above code it is clear that XAML used precise format of code.

2.     Properties as elements:

Properties are normally written inline as known from XML <Button Content="OK" />. But what if we want to put a more complex object as content like an image that has properties itself or maybe a whole grid panel? To do that we can use the property element syntax, this allows us to extract the property as an own child element.



         <Image Source="ImagePath" Width="50" Height="50" />



3.     Implicit Type Conversion:

A very powerful construct of WPF are implicit type converters. They do their work silently in the background. When you declare a BorderBrush, the word ‘Yellow’ is only a string. The implicit BrushConverter makes a System.Windows.Media.Brushes.Yellow out of it. The same regards to the border thickness that is being converted implicit into a Thickness object. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your own classes.

<Border BorderBrush="Yellow" BorderThickness="0,10">


4.     Markup Extensions:

Markup extensions are dynamic placeholders for attribute values in XAML. They resolve the value of a property at runtime. Markup extensions are surrouded by curly braces (Example: Background="{StaticResource NormalBackgroundBrush}"). WPF has some built-in markup extensions, but you can write your own, by deriving from MarkupExtension. These are the built-in markup extensions:

1.         Binding

                To bind the values of two properties together.

2.         StaticResource

                One time lookup of a resource entry

3.         DynamicResource

                 Auto updating lookup of a resource entry

4.         TemplateBinding

                To bind a property of a control template to a dependency property of the control

5.        x:Static

                Resolve the value of a static property.

6.        x:Null

                Return null

5.     Namespaces:

                At the beginning of every XAML file you need to include two namespaces. The first is                  http://schemas.microsoft.com/winfx/2006/xaml/presentation (It is mapped to all WPF controls in System.Windows.Controls)

   The second is http://schemas.microsoft.com/winfx/2006/xaml (it is mapped to               System.Windows.Markup that defines the XAML keywords)

   The mapping between an XML namespace and a CLR namespace is done by the XmlnsDefinition             attribute at assembly level. You can also directly include a CLR namespace in XAML by using the        clr-namespace: prefix.

Don't want to miss updates? Please click the below button!

Follow MindStick