Silverlight and ASP.NET : XAML

Silverlight uses XAML to build the visual tree. Take another look at the MainPage class from the last example:

<UserControl x:Class="SilverlightSite.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">
    <Button Content="Hello World!"
      x:Name="theButton"
      Click="theButton_Click"></Button>
  </Grid>
</UserControl>

The XAML constructs an instance of the UserControl class, associates it with the class named SilverlightSite.MainPage, and initializes the DesignWidth property to 400 and the DesignHeight property to 300. Next, the XAML constructs an instance of the Grid class, assigns the name LayoutRoot to the Grid, and sets the Background to white. Finally, the XAML constructs an instance of the Button class, names it theButton, assigns the string "Hello World!" to the Content property, and then sets up the Click event so that it's handled by the theButton_Click method (which is a member of the SilverlightSite.MainPage class). After spending some time with ASP.NET, this should look awfully familiar—this is how the ASP.NET Page class builds its control tree. The major difference here is really between the ASPX syntax and the XAML syntax.

1. Constructing the Visual Tree

The role of XAML in Silverlight is to construct the Silverlight component's visual tree. This happens in the MainPage constructor. Notice that the code produced by Visual Studio contains a call to the method InitializeComponent. InitializeComponent parses the XAML to create the objects composing the visual tree and initializes the properties mentioned in the XAML. For example, the previous snippet and the following snippet produce the same visual tree:

Page ConstructVisualTreeProgrammatically()
{
  Page page = new Page();

  Grid grid = new Grid();
  Button button = new Button();
  button.Click += this.theButton_Click;
  button.Content = "Hello World!";
  grid.Children.Add(button);

  return page;
}

2. XAML and Namespaces

Near the top of the XAML in the earlier example, you can see four XML namespaces defined, the first two of which I discuss here (they're most important). The default namespace is assigned to be "http://schemas.microsoft.com/winfx/2006/xaml/presentation". This namespace scopes the typical Silverlight features and the control canon. For example, by making this the default namespace, you can simply use the <Button /> tag without any prefixes. The second namespace, "x", is assigned to "http://schemas.microsoft.com/winfx/2006/xaml". This namespace defines Silverlight keywords such as Name (used to name XAML elements to make them available programmatically) and Key (used to assign key/value pairs within Silverlight resource dictionaries).

You can add other namespaces as necessary. For example, if you want to make any types you define in the SilverlightSite assembly available within XAML, you could add a namespace. For example, if the Silverlight component assembly has a type named CustomButton in it, and you'd like to include it as part of the visual presentation, you could add the namespace as follows, and then use the component from within the XAML as shown in the following bold text:

<UserControl x:Class="SilverlightSite.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"

 xmlns:my="clr-namespace:SilverlightSite"

 mc:Ignorable="d"
 d:DesignHeight="300" d:DesignWidth="400">
   <Grid x:Name="LayoutRoot" Background="White">
      <my:CustomButton
       Content="Hello World!"
       x:Name="theButton"
       Click="theButton_Click"></my:CustomButton>

   </Grid>
</UserControl>