Silverlight - XAML Overview

Advertisements

Previous Page
Next Page  

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

  • In XAML, it is very easy to create, initialize, 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 Silverlight 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-compatibility/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.

Information Description
<UserControl Provides the base class for defining a new control that encapsulates the existing controls and provides its own logic.
x:Class = "FirstExample.MainPage" It is a partial class declaration, which connects the markup to that partial class code behind, defined in it.
xmlns = "http://schemas.microsoft.com /winfx/2006/xaml/presentation" Maps the default XAML namespace for Silverlight client/framework.
xmlns:x = "http://schemas.microsoft.c om/winfx/2006/xaml" XAML namespace for XAML language, which maps it to x: prefix.
xmlns:d = "http://schemas.microsoft.com /expression/blend/2008" XAML namespace is intended for designer support, specifically designer support in the XAML design surfaces of Microsoft Visual Studio and Microsoft Expression Blend.
xmlns:mc = "http://schemas.openxmlforma ts.org/markup-compatibility/2006" Indicates and supports a markup compatibility mode for reading XAML.
> End of object element of the root.
<Grid></Grid> These are the starting and closing tags of an empty grid object.
</UserControl> Closing the object element.

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 valid 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 = "Click Me" Height = "30" Width = "60"/>

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

<Button> 
   <Button.Content>Click 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 Silverlight

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

  • It is more accurate to say that WPF and Silverlight are very similar in many respects. Despite the differences, it is still informative to look at the XAML feature Silverlight has borrowed from WPF. For example, Silverlight 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 familiar to you.

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

  • 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 application 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 application 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-compatibility/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 = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click 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-click event implementation in which the TextBlock text is updated.

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample {
 
   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }
		
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

  • 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 Silverlight design.

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

Advertisements