How XAML works with WPF

0 votes
asked Jul 2, 2014 in WPF by Peter

What are things we should know at minimum to understand very basic XAML code. Can someone give some kind of overview about XAML and how does it work with WPF.

Share

1 Answer

+1 vote
answered Jul 2, 2014 by Nixon
selected Jul 2, 2014 by administrator
 
Best answer

XAML is a declarative markup language something like XML, HTML. XAML is really a valid XML, Case sensitive, declarative markup language used to create user interface for .NET framework application. WPF, Silverlight applications, Windows 8 apps, etc uses XAML to do UI screens. Even though these platforms are using XAML, it is not necessary to use XAML to do that development. For example, WPF does not need XAML and XAML does not need WPF. XAML is something like C# and VB.NET, used for UI screen development.

Let’s see some basics about XAML and how that works in WPF application

Lot of people might have or had this question, at least I had this question, that what is really I see at top of every XAML page in WPF with Xml namespace as below.

<Window x:Class="DataBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">

It really took some time to understand this. Basically what we are doing is these xml namespaces are similar to “Using” statements in CLR classes. In CLR classes, the namespaces are used to create the boundary to differentiate the classes with the same name between one namespace to another namespace. That mean even though the class names are same, as long as they are in 2 different namespaces, then both are totally different classes. And whenever we want to use that class, we will add using statement on of the class in which we use.

Same like that, in XAML (since XAML is really a XML) we need to use XML namespace. So that, even if there are two elements in XAML code has same name, they can be differentiated by the XML namespace. So, for each .NET CLR namespace, there will be a mapping XAML namespace as below

wpf-xml-xaml-namespace

XAML Code:

<TextBox Text=”Name1” />

C# Code:

TextBox txtBox = new TextBox();
txtBox.Text = “Name1”

Both XAML and C# code are having same meaning. So, whatever you do in XAML, you can do it in C#. Usually in winform application, there will be a designer file where all of the controls and layouts will be created using C#.NET or VB.NET same like that, in WPF, XAML is the default language used for UI.

If you look at example closely, XAML has the element name “TextBox” that matched with .NET class “TextBox”. “Text” attribute in XAML is nothing but “Text” property in .NET.

wpf-textbox-class-snapshot

So, whatever we write in XAML will be a class or properties which are available in .NET framework. When we run the above XAML code, .NET Framework will be creating instance of “TextBox” class and sets the “Text” property value to “Name1”

Now we will see some syntax which used very often in XAML.
Attribute Syntax:
It will be added as attributes of Object Element. Example is “Text” attribute in the first example.
Property Element Syntax:
Property Element Syntax is the modified version of Attribute Syntax. i.e for some of the attributes, values cannot be specified within the attribute syntax. Because attribute syntax can take only regular string values (But it does not mean that it take only “String” data type values) . Whenever we need to set value of an attribute and if it is not just a string, then we will go for “Property” element syntax.
For example:
I have a rectangle and if I want to fill that rectangle with Blue color, I can simple use “attribute syntax” to achieve this, because I can specify the color as simple string.

<Rectangle Width="200" Height="100" Fill=”Blue”>

But If I need to fill the same rectangle with Radial color, the “Attribute Syntax” will not work. We need to use Property Syntax. In the below example, “<Rectangle.Fill>” is the property syntax. We will write the syntax using .operator after the object element.

Example:

<Rectangle Width="200" Height="100">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
          <RadialGradientBrush.GradientStops>
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Blue" Offset="0.50" />
            <GradientStop Color="LimeGreen" Offset="1" />
          </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

Attached Properties:
Attached properties are special type of syntax which are introduced in XAML where the Properties are originally defined in one particular type, but the property will use in a different element. Most of the times, the attached properties are used to provide some additional information to the parent element from child elements. There are other cases as well.
Example:

<Canvas Width="200" Height="100">
            <TextBox Canvas.Left="50" Canvas.Top="35" Text="{Binding FirstName}" Height="23" Width="75"/>
</Canvas>

wpf-canvas-attached-property

In the given example code above, inside the TextBox element, we have something called “Canvas.Left”, “Canvas.Top”. The properties Left and Top are available in Canvas (in fact, it is coming from base class Panel), but used in TextBox element, to inform the Canvas container that the TextBox should be rendered 50 to Left and 35 to top.

“WPF Attached Properties” explains the Attached property more detail with different example.

Markup Extensions:
Markup extensions are another frequently used syntax for databinding concept. Below code is a small example of markup extension. The markup extension will start with Curly brace “{”

<TextBox Text="{Binding FirstName}" Height="23" Width="239"/>

Article “WPF data binding with textbox binding example” explains the markup extension very clear.

Type Converters:
If you look at the XAML code little bit closer, you can see that, everywhere we are specifying string within double quotes. So, how does the string is converted to specific type? Here is what happens behind the scene.

Whenever the XAML processor processes an attribute, first it will check the data type of the attribute. For example “Height” attribute’s data type is “int”. Then it will check the value set for that attribute and finds whether it is direct string value or markup extension. If the value is string, then it will try to convert that string to the type of the attribute. In our case, it will convert the string to Integer.

If the attribute type is not a primitive type, but enumeration, then the processor will check the value set to that attribute is matched with the item inside the enum. If it is matched, then it will use that. Suppose, if the attribute value is not both primitive type or Enum, then Type Converters are used to convert the value. Look at the question “WPF Type Converter” that explains it clear.

Your answer

Preview

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com
...