Use of XAML in Windows Presentation

In this article we will learn how we can use attributes of control and properties of control in designing our window with XAML.
  • 1769

Using XAML in Windows Presentation

XAML (Extensible Application mark-up Language) is a declarative language. Here in XAML, we declare our control which we need to use on our form as we declared in ASP.NET 2.0 to design web Form with HTML. The extension of this file is .xaml.

We use the attributes and properties of control in XAML to design our Form. For good design of our form we should have the full knowledge of elements, properties and attributes of elements. XAML is case sensitive.

The Root Element

The root elements for the XAML files are:

1. Page for Web application
2. Window for Windows application
3. Resource Dictionary for an external dictionary
4. Application for application definition

How we define our control with XAML?

Define the control with attribute:

Here we are defining syntax to use a text Box on our Window.

<Window x:Class="WindowsApplication3.Window1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="WindowsApplication3" Height="300" Width="300">

  <Grid>

    <TextBox Margin="50,34,50,160"></TextBox>

    <Label Margin="70,122,70,120" Content="Enter Your Name" Background="Gray"></Label>

  </Grid>
</
Window
>

The window, after the above XAML Code

Image1.JPG

Figure 1: Using XAML to design a TextBox and a Label control. Here, enter  the name in TextBox.

We can define other controls, like:

<Window x:Class="WindowsApplication3.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="WindowsApplication3" Height="300" Width="300"

    >

    <Grid>

      <Label Margin="23,45,34,56" Background="Aquamarine">HI</Label>

      <Label Margin="45,54,56,58" Background="Aqua">HOW</Label>

      <Label Margin="78,63,75,68" Background="Bisque"> ARE</Label>

      <Label Margin="105,73,95,78" Background="Brown">YOU</Label>

    </Grid>
</Window>


The window will become as under:

Image2.JPG

Figure 2:


If we want to design the form by using  property of  control  then we can do it in the following manner:

<Window x:Class="WindowsApplication3.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="WindowsApplication3" Height="300" Width="300"

    >

    <Grid>

      <Label>

        <Label.Margin>23,34,45,56</Label.Margin>

        <Label.Background>Gray</Label.Background>

        <Label.BorderThickness>4</Label.BorderThickness>

       </Label>

 

      <Label>

        <Label.Margin>43,54,65,76</Label.Margin>

        <Label.Background>Blue</Label.Background>

        <Label.BorderThickness>1</Label.BorderThickness>

      </Label>

 

      <Label>

        <Label.Margin>63,74,85,96</Label.Margin>

        <Label.Background>Red</Label.Background>

        <Label.BorderThickness>1</Label.BorderThickness>

      </Label>

 

      <Label>

        <Label.Margin>83,94,105,116</Label.Margin>

        <Label.Background>Green</Label.Background>

        <Label.BorderThickness>1</Label.BorderThickness>

      </Label>

  </Grid>

</Window>
 

Window will become:

Image3.JPG
 

Figure 3

 

Summary:


There are three forms;first two forms with attributes of element and last form I designed with the help of properties. So, we can use attributes of element as well as properties of element to design a window.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.