XAML represents the UI backbone of Silverlight.. It was firstly introduced in WPF ( Windows Presentation Foundation) as the main tool for windows developers to create rich user interfaces. Seeing that Silverlight was a subset of WPF, it was easy to port this markup language to adopt it also in it.
In this article, you will get a detailed look at XAML by exploring important tags and rules which are important to know to be able to build sophisticated Silverlight user interfaces.
Quick Facts
- XAML is pronounced as ‘Zammel’.
- XAML stands for Extensible Application Markup Language.
- It is based on the XML format.
- All XAML elements are case sensitive.
- Many XAML attributes’ values are case sensitive. For instance, the Name attribute’s values of an element are case sensitive.
- Every element in a XAML document maps to an instance of a Silverlight class. The name of the element matches the name of the class exactly.
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
internal System.Windows.Controls.Grid LayoutRoot;
- Some elements known as Containers, such as Grid can contain other elements.
<Grid x:Name="LayoutRoot" Background="White">
<Button x:Name="btnDeepInConcept" Content="Get Deeper"></Button>
</Grid>
- If the element does not contain any object ( usually object keyword is reserved for programming languages like C# as for element is for markup languages as XHTML or XML), you can declare the element using a self-contained closing tag.
<Canvas>
<Rectangle />
</Canvas>
- All XAML elements can be declared without assigning a value to the Name property as long as you aren’t going to use it in your code behind. In Windows Forms application, usually this will result in a compilation error.
- In All XAML documents, there can be only one top-level element. (Single rooted hierarchy). A bar-bones XAML document looks like this : ( A Silverlight ‘page’ is represented by the UserControl class)
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DaisleyHarrison.Silverlight.HtmlTextBlock;
assembly=DaisleyHarrison.Silverlight.HtmlTextBlock"
Width="400" Height="300">
<Grid x:Name="LayoutRoot">
</Grid>
</UserControl>
XAML Namespaces
- XAML Namespaces are represented by xmlns and xmlns:x attributes as shown in the code snippet above.
- xmlns stands for xml namespace or xaml namespace.
- The default namespace for Silverlght Client presentation which represents Silverlight 3 classes like the Grid and UserControl is always mapped with xmlns to :
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- The default namespace for Silverlight XAML language namespace is always mapped with xmlns:x to :
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- These namespaces are required for the XAML parser to be able to read the elements definitions that the XAML markup references.
- As shown above these namespaces are declared using attributes. You can declare theses namespaces inside any XAML element, but convention dictates to declare them in the root element and all nested elements will use them.
- You can declare your own namespace in a XAML document to reference a custom control you want to use in your XAML document. You define your custom prefix ctrl the .NET Namespace which your classes are included GVControls and finally your assembly name GvLibrary. In this case, all your classes in GvLibrary.dll can be referenced using the prefix ctrl as shown below :
<UserControl x:Class="SilverlightApplication1.Page"
xmlns:w="clr-namespace:GvControls;assembly=GvLibrary"
...
<ctrl:HotButton Text="Click Me!" Click="DoSomething"></ctrl:HotButton>
- the X:Class Attribute specifies the code behind class for the XAML page. it is derived from the UserControl class.
namespace SilverlightApplication1
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
}
}
- To manipulate XAML elements programmatically from code behind you assign to an element a unique id using the attribute x:Name.
<Grid x:Name="LayoutRoot">
</Grid>
public Page()
{
InitializeComponent();
this.LayoutRoot.Visibility = Visibility.Collapsed;
}
In the next article, we will look at XAML events and properties.
Joseph Ghassan