Home  separator  Fundamentals  separator  XAML
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


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 child 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
The first identifier within a pair of curly braces is the name of the extension. All preciding identifiers are named parameters in the form of Property=Value. The following example shows a label whose Content is bound to the Text of the textbox. When you type a text into the text box, the text property changes and the binding markup extension automatically updates the content of the label.

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




Last modified: 2013-12-13 09:08:46
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Ganesh
Commented on 15.July 2011
Nice...
batham
Commented on 18.July 2011
good content for beginners.
Safoura
Commented on 20.July 2011
its very comprehensive . thanks alot
batham
Commented on 21.July 2011
good content for beginners.
AT
Commented on 22.July 2011
nice
Rahul
Commented on 1.August 2011
Very Helpful!! I liked it!!

Thanks!
Ali
Commented on 4.August 2011
Very Good, thank you
Jack Shasha
Commented on 8.August 2011
When I can understand a new subject in a few minutes that means that it is &quot;clear and concise&quot; as I like it. I am a technical writer and always striving to achieve a similar effect. Thanks.
sai
Commented on 16.August 2011
Thanks a lot..!!! It is really very easy to understand
OSK
Commented on 18.August 2011
Screw the WPF chapt in my C#2010 for dummies, this is how a proper tutorial should be.
Ian
Commented on 23.August 2011
The code above is only longer because of the parameterless constructors. XAML allows a line to initialise an object. You need a line for each parameter in code because of the lack of constructors.
Ramya krishna
Commented on 24.August 2011
Thanks alot good one
Girish
Commented on 26.August 2011
Thank you for this short n precise tutorial..!
Mahesh
Commented on 26.August 2011
Good one and easily understandable.
Thank U
Mahesh
Commented on 26.August 2011
Good one and easily understandable.
Thank U
Jason
Commented on 6.September 2011
Very cool tutorial. Is there a way though that you could put forward and next buttons? Thanks.
bibin tv
Commented on 6.September 2011









Darpok
Commented on 9.September 2011
And i was thinking i would never learn XAML
Pharme195
Commented on 14.September 2011
Hello! kfedfaa interesting kfedfaa site! I'm really like it! Very, very kfedfaa good!
Pharmg537
Commented on 14.September 2011
Hello! fdkcgae interesting fdkcgae site! I'm really like it! Very, very fdkcgae good!
dk
Commented on 16.September 2011
very well said!!
Atif Hussain
Commented on 21.September 2011
Thanks. A very good and succint read. Waiting for more articles.
LampGlow...
Commented on 24.September 2011
Fantastic Notes
Baljinder
Commented on 24.September 2011
Thanks A Lot......
innocent...
Commented on 25.September 2011
great ..

Name
E-Mail (optional)
Comment