Facebook

XAML Tutorial part 1

Written By Martin Kariuki on Tuesday 31 May 2016 | 05:43

XAML stands for eXtensible Application Markup Language. It is a markup language for creating user interfaces for desktop, mobile and silverlight applications in .NET platform. The desktop technology is called WPF or Windows Presentation Foundation while for web and out of browser applications, you can use silverlight. Windows mobile apps are written only in XAML and therefore if you desire to develop windows app, XAML is the place to start.
Gone are the days of windows forms application. Windows forms applications involved creating a form and dragging controls on the form ending with a rigid rusty user interface. Although windows forms were better than many other desktop GUI creation for other platforms, they were still way behind the modern day needs for beautiful  user interface.
So, where do we start. I'm glad you asked. Xaml is a markup language. If you understand HTML and other markup languages like coldfusion, you will find it very easy to learn XAML. To write XAML markup, you need Visual studio or expression blend. Visual studio allows you to work on the UI as well as write code. Expression blend is mostly used for creating the UI using XAML with a richer environment that visual studio.
A XAML document has the extension of *.xaml. it may have a code behind file named according to the programming language being used such as *.cs for C# and *.vb for VB .NET.
An XAML document contains elements. You can think of these elements as XML tags. XAML is essentially and XML document. Every XML document must have one root tag. The common tags as <Window>, <Page>, <UserControl>. These tags represent Actual .NET classes. Therefore, a Window is a class and so is Page and UserControl.
The classes in .NET are always contained in a namespace. In ordinary .NET programming, we first import the namespaces using the word "using". In XAML we do the same but using a different approach. we introduce xml namespaces. This is done by using the word xmlns.
All native XAML tag belong to the default namespace. Any other namespaces must have a prefix.
if you want to include the default namespace, you must include this in your document
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation".
The url part is the just a unique identifier. You should have unique identifiers for various namespaces.
A none default namespace must have an alias like so:
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml".

To access controls from a non default namespace you must include the alias for example
x:Class  
Most XAML elements have properties. There are two types of properties: Attached properties and Dependancy properties. Attached properties do not belong to the element in which they appear.   For example a window will have height and width. You can specify them in the element like so.
<Window x:Class="CodeBehindNamespace.CodeBehindClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Xaml Tutorial"Height="200"Width="400"> 

</Window>
The namespaces are defined in the root element before they can be used elsewhere.
You can only have one element as the root element.
Most elements can have other elements in child elements. Within our window we can have a grid.

<Window x:Class="CodeBehindNamespace.CodeBehindClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Xaml Tutorial"Height="200"Width="400"> 

       <Grid>
             <Grid.RowDefinitions>
            <RowDefinitionHeight="*" />
            <RowDefinitionHeight="Auto" />
            </Grid.RowDefinitions> 

      </Grid>
</Window>
In the above example, the grid has two rows defined using Grid.RowDefinitions. The first row takes all the space that remains after the other row is drawn. Next we can have another element and place in within the grid using attached property of Grid.Row. We want it to appear in the first row. The rows of a grid are defined using a zero based array. So the first row will be 0.
<TextBlock Grid.Row=0 Text="Welcome to XAML" />
So now our XAML document looks like this.

<Window x:Class="CodeBehindNamespace.CodeBehindClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Xaml Tutorial"Height="200"Width="400"> 

       <Grid>
             <Grid.RowDefinitions>
            <RowDefinitionHeight="*" />
            <RowDefinitionHeight="Auto" />
            </Grid.RowDefinitions>

<TextBlock Grid.Row=0 Text="Welcome to XAML" />
      </Grid>
</Window>




0 comments :

Post a Comment

Recent