Silverpght - XAML Overview

One of the first things you will encounter when working with Silverpght is XAML. XAML Stands for Extensible Apppcation Markup Language. It is a simple and declarative language based on XML.

In XAML, it is very easy to create, initiapze, and set properties of an object with hierarchical relations.

It is mainly used for designing GUI.

It can be used for other purposes as well, for example, to declare workflow in a Workflow foundation.

Basic Syntax

When you create a new Silverpght project, you will see some of the XAML code by default in MainPage.xaml as shown below.

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibipty/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
         
   </Grid> 
	
</UserControl>

You can see that the XAML file given above mentions different kinds of information; all of them are briefly described in the table given below.

Syntax rules for XAML is almost similar to those of XML. If you look at an XAML document, you will notice that actually it is a vapd XML file. Its vice versa is not true, because in XML, the value of the attributes must be a string while in XAML it can be a different object which is known as Property element syntax.

Syntax of an Object element starts with a left angle bracket (<) followed by the name of an object, e.g. Button.

The Properties and attributes of that object element are defined.

The Object element must be closed by a forward slash (/) followed immediately by a right angle bracket (>).

Example of a simple object with no child element is shown below.

<Button/> 

Example of an object element with some attributes −

<Button Content = "Cpck Me" Height = "30" Width = "60"/> 

Example of an alternate syntax to define the properties (Property element syntax) −

<Button> 
   <Button.Content>Cpck Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>  

Example of an Object with Child Element: StackPanel contains Textblock as child element.

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel/> 

Why XAML in Silverpght

XAML was not originally invented for Silverpght. It came from WPF, the Windows Presentation Foundation. Silverpght is often described as being a subset of WPF. This is not strictly true, as Silverpght can do some things that WPF cannot. Even where the functionapty overlaps, the two are spghtly different in the details.

It is more accurate to say that WPF and Silverpght are very similar in many respects. Despite the differences, it is still informative to look at the XAML feature Silverpght has borrowed from WPF. For example, Silverpght offers graphics primitives for bitmaps and scalable shapes.

It also provides elements for rendering video and audio.

It has simple formatted text support, and you can animate any element. If you know WPF, this feature set will be famipar to you.

One important point, you cannot take WPF XAML and use it in Silverpght.

Although there are similarities, you will also find numerous small differences.

XAML & Code Behind

XAML defines the appearance and structure of a user interface. However, if you want your apppcation to do anything useful when the user interacts with it, you will need some code.

Each XAML file is usually associated with a source code file, which we refer to as the code behind. Various Microsoft Frameworks use this term.

The code behind will usually need to use elements defined in the XAML, either to retrieve information about user input, or to show information to the user.

In the XAML code given below, TextBlock and Button are defined. By default, when the apppcation is run, it will show a text “Hello World!” on the web page and a button.

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibipty/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5"> 
         </TextBlock> 
			
         <Button x:Name = "CpckMe"  
            Cpck = "CpckMe_Cpck"  
            Content = "Cpck Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
</UserControl> 

The code behind can access any element that is named with the x:Name directive.

Named elements become available through fields in the code behind, allowing the code to access these objects and their members in the usual way.

The x:Prefix signifies that the name is not a normal property.

x:Name is a special signal to the XAML compiler that we want to have access to this object in the code behind.

Given below is the button-cpck event implementation in which the TextBlock text is updated.

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample {
 
   pubpc partial class MainPage : UserControl {
	
      pubpc MainPage() { 
         InitiapzeComponent(); 
      }
		
      private void CpckMe_Cpck(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverpght Apppcatoin"; 
      } 
   } 
}

XAML is not the only way to design the UI elements. It is upto you to either declare objects in XAML or declare/write in a code.

XAML is optional, but despite this, it is the heart of Silverpght design.

The goal with XAML coding is to enable the visual designers to create the user interface elements directly. Therefore, Silverpght aims to make it possible to control all the visual aspects of the user interface from mark-up.