Introduction to XAML

In this post I will explain about XAML and its various parts.

What is XAML?

XAML (Extensible Application Markup Language) is new markup language introduced with WPF. It is created based on XML. XAML is not only used by WPF applications but it can be used by Silverlight, WF and other applications which support XAML. XAML is declarative language. You can create and run WPF application without XAML code and use code behind for the same. But you if you use XAML to write UI you need to write very less code compare to code behind. Writing code in XAML is very short and easy to read.     

XAML and Code behind

<Grid>

    <Button Name="TestButton" Content="Click Me!"

     Height="35" Width="150">

    </Button>

</Grid>

You need to write below code in code behind file to achieve equivalent to above XAML code.

Grid grd = new Grid();

Button btn1 = new Button();

btn1.Content = "Click Me!";

btn1.Name = "TestButton";

btn1.Height = 40;

btn1.Width = 150;

Grid.SetColumn(btn1, 0);

Grid.SetRow(btn1, 0);

grd.Children.Add(btn1);

this.AddChild(grd);

Type Conversion

XAML implicitly converts from one type to another. When you specify background of button using XAML you simply type sting but WPF internally converts it in System.Windows.Media.Brushes.

<Button Background="LightBlue" />

If you want to achieve the same in code behind you need to write following code.

Button btn1 = new Button();

btn1.Background = System.Windows.Media.Brushes.LightBlue;

Attribute and Property Element Syntax

You can specify value of properties using attribute syntax as well using property element syntax. In some cases you can’t specify value using attribute syntax so you have to use property element syntax in such cases.

Attribute Syntax

<Button Content="Click Me!" Background="LightBlue"

        Height="40" Width="150">

</Button>

Property Element Syntax

<Button>

    <Button.Content>Click Me!</Button.Content>

    <Button.Height>40</Button.Height>

    <Button.Width>150</Button.Width>

    <Button.Background>

        <LinearGradientBrush>

            <GradientStop Color="Blue" Offset="0" />

            <GradientStop Color="Cyan" Offset="1" />

        </LinearGradientBrush>

    </Button.Background>

</Button>

Some properties can’t be set using attribute syntax. In above example we fill background of button using LinearGardientBrush with property element syntax which is not possible to set using attribute syntax.

XAML File compilation process

WPF application contains XAML and XAML.CS files. When you compile your application it will first XAML file into BAML and CS file into g.cs. For e.g. you application contains Window1.xaml and Window1.xaml.cs file then compiler converts it to Window1.baml and Window1.g.cs files. BAML stands for Binary Application Markup Language and g stands for generated. Compiler uses BAML and g.cs files to generate executable.

BAML file is compiled version of XAML so it’s not human readable format but it is more efficient for loading and parsing at runtime. BAML files are optimized for faster loading at runtime. The g.cs file contains code to load BAML from the executable and create UI. These both files are stored in Obj\Debug and Obj/Release folder of application’s local folder respectively.