Introduction to XAML

XAML stands for Extensible Application Markup Language. Its a simple language based on XML to create and initialize .NET objects with hierarchical relations. Altough it was originally invented for WPF it can by used to create any kind of object trees.

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 parameterless 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 ist just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages:

• 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.

XAML vs. Code

As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.

 
<StackPanel>
    <TextBlock Margin="20">Welcome to the World of XAML</TextBlock>
    <Button Margin="10" HorizontalAlignment="Right">OK</Button>
</StackPanel>
 
 

The same expressed in C# will look like this:

 
// Create the StackPanel
StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;
 
// Create the TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Margin = new Thickness(10);
textBlock.Text = "Welcome to the World of XAML";
stackPanel.Children.Add(textBlock);
 
// Create the Button
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "OK";
stackPanel.Children.Add(button);
 
 

As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.

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 chlild element.

 
<Button>
  <Button.Content>
     <Image Source="Images/OK.png" Width="50" Height="50" />
  </Button.Content>
</Button>
 
 

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 "Blue" is only a string. The implicit BrushConverter makes a System.Windows.Media.Brushes.Blue out of it. The same regards to the border thickness that is beeing 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 classses.

 
<Border BorderBrush="Blue" BorderThickness="0,10">
</Border>
 
 

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:

• Binding
  To bind the values of two properties together.
• StaticResource
  One time lookup of a resource entry
• DynamicResource
  Auto updating lookup of a resource entry
• TemplateBinding
  To bind a property of a control template to a dependency property of the control
• x:Static
  Resolve the value of a static property.
• x:Null
  Return null

 
<TextBox x:Name="textBox"/>
<Label Content="{Binding Text, ElementName=textBox}"/>
 
 

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.

 
<Window xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>
</Window>
 
 

 Comments on this article

terror	Commented on 4.July 2010 realy super...........
Vijayasekaran	Commented on 7.July 2010 Its easy to understantable as a fresher in WPF.Thanks
Nagarajan	Commented on 9.July 2010 good can u explain architecture of wpf little bit in deep
Rajni Padhiyar	Commented on 12.July 2010 superb article, Thanks Rajni Padhiyar
jiturcm	Commented on 14.July 2010 thats very good
Sunil Arora	Commented on 14.July 2010 Good but need to me more explanatory with examples...
Chintan	Commented on 15.July 2010 Good
shankar	Commented on 22.July 2010 its easy understand clearly ....very nice website...
Ripen	Commented on 23.July 2010 Good One
Ioan Bucur	Commented on 27.July 2010 yat... yet another thanks :) A short and clear description of XAML basics and terms.
manohar	Commented on 28.July 2010 Thanks,Its easy to understantable as a fresher in WPF, need to me more explanatory with examples...
surendramarri	Commented on 3.August 2010 If u dont main can u send the any WPF pdfs
bindu	Commented on 5.August 2010 hi nice article but pls provide some more examples for Namespaces and Markup Extensions
Biswasagar	Commented on 5.August 2010 Thanks
Balasim	Commented on 6.August 2010 Very nice introduction
Saffi	Commented on 8.August 2010 Very Good Explanation, Thanks......
najme	Commented on 14.August 2010 DynamicReport in xaml without table
Bhasker Reddy	Commented on 17.August 2010 good source for wpf and great explanation... Thanks & Regards, Bhasker Reddy
Kamal	Commented on 18.August 2010 easy to understand
thilak	Commented on 18.August 2010 wonderful...
COPYRIGHT LAWS	Commented on 23.August 2010 COPYRIGHT INFRINGEMENT AT ITS FINEST!!!!!!!!! MOSER IS GREASY AS HELL
carolyne	Commented on 24.August 2010 really gud
Ramana	Commented on 27.August 2010 nice article and easy to undersatnd betweenwindows forms and wpf
anuradha...	Commented on 30.August 2010 GOOD ONE
Annu	Commented on 31.August 2010 ya its perfect article for beginners.thanks