Sunday, September 1, 2013

Introduction to XAML

XAML stands for Extensible Application Markup Language and pronounced as "Zammel", it is a markup language used to instantiate .net Objects and hierarchical relations.
In other words, XAML documents define the arrangement of panels, and controls that make up the windows in a WPF application.

XAML is an all-purpose XML-based syntax for representing a tree of .NET object.(These object could be buttons and text boxes in a window or custom classes you've defined.)

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.

Understand why need XAML?
From a very long ago the group of UI developer realized that the most efficient way to tackle complex, graphically rich application is to separate the graphical portion from the underlying code. so that designer can own the graphics and developers can own the code and both design and code can be design and refined separately.

Advantage of XAML

It is important to understand that WPF doesn't required 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.
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.

XML Namespace

Suppose you are using any class name in your XAML so as .Net code XAML parser also need to know the .Net namespace where this class is located.

e.g. There is a class XYZ; this could be exist in several places- it might be in the .Net, it might in the third party component or one you have defined in your application.To figure out which class you really want, the XML parser examine the XML namespace that's applied to the element.


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>  

The xmlns attribute is a specialized attribute in the world of XML that's reserved for declaring namespace.
The two main namespace
http://schemas.microsoft.com/winfx/2006/xaml/presentation is the core WPF namespace.it include all the WPF classes, including the controls you use to build user interfaces.In the example, this namespace is declared without a namespace prefix, so it becomes the namespace for the entire document.

http://schemas.microsoft.com/winfx/2006/xaml is the XAML namespace. it includes various XAML utility features

XAML vs Code  
 code download
That we can do from code can also be achieve by the XAML, take a example of UI block

           <StackPanel>
                  <TextBox Margin="10" Text="Hello" />
                  <Button Width="50" Height="30" HorizontalAlignment="Right">OK</Button>
          </StackPanel> 
    
 The same in c# code:
   
            StackPanel stackPanel = new StackPanel();
            this.Content = stackPanel;

            TextBox textbox = new TextBox();
            textbox.Margin = new Thickness(10);
            textbox.Text = "Hello";
            stackPanel.Children.Add(textbox);

            Button button = new Button();
            button.Width = 50;
            button.Height = 30;
            button.Content = "OK";
            button.HorizontalAlignment = HorizontalAlignment.Right;
            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.

1 comment: