Home > ASP.NET and Silverlight > Xaml Control

ASP.NET Futures (July 2007): Using the Xaml Control

The Xaml server control enables you to provide a rich interactive application (RIA) experience with your Web application, beyond what can be done with AJAX and DHTML alone.

The Xaml control is a generic control that enables you to add Silverlight functionality into your ASP.NET Web application. You set the XamlUrl property, and the runtime provides the basic JavaScript Sys.Preview.UI.Xaml.Control type in the client. This means that the control is very generic and not tied to media-style scenarios, unlike the Media control.

You can use managed code to handle interaction with the Xaml control. (You must be using the Microsoft Silverlight 1.1 Alpha Refresh runtime; it is suggested that you set the MinimumSilverlightVersion property to 1.1). Alternatively, you can create a JavaScript type that you reference through the ClientType property and reference its library referenced by using the Scripts collection. The JavaScript type can be used in either a Silverlight 1.0 or 1.1 runtime model.

This Quickstart illustrates how to use a client JavaScript type to work with the Xaml control. It also shows how to use managed code (C#) and two dynamic languages (IronPython and Managed JScript).

The following example shows the markup for a Xaml control that defines a simple calculator in XAML. The logic for the control is defined in a separate unmanaged, client JavaScript class. The Xaml control references the file that contains the XAML markup (Calculator.xaml). You can also see how to reference the client-script library (Calculator.js) for the calculator code and how to reference the JavaScript class (Custom.Calculator).

		
<asp:xaml runat="server" XamlUrl="calculator.xaml" ClientType="Custom.Calculator"
    OnClientXamlError="onXamlError">
    <scripts>
        <asp:scriptreference path="calculator.js" />
    </scripts>
</asp:xaml>
        

In contrast to the Media control, the Xaml control is not designed for a specific scenario. Instead, you can use the Xaml control in many RIA scenarios. In its basic form, the Xaml control provides a JavaScript type (an instance of Sys.Preview.UI.Xaml.Control) that includes members such as xamlInitialize and xamlError. The Xaml control references a XAML file. The code for interacting with the XAML can be in a managed-code assembly, in a managed dynamic-language script file, or in an unmanaged client JavaScript library (.js file).

Because the Xaml server control is a basic control, there are no members that you can use to set properties or bind event handlers of the supporting class (managed-code assembly, managed dynamic-language code, or unmanaged client JavaScript). However, in some cases you might create a custom server control that derives from the Xaml control and that does expose specific members, much like the Media control.

To create a class in JavaScript to use with the Xaml control, you can use the Microsoft ASP.NET AJAX Extensions model and create a type that derives from the Sys.Preview.UI.Xaml.Control base class. This model enables you to attach event handlers to XAML DOM elements during the xamlInitialize event. This event is raised when the XAML DOM is loaded and ready. The model also provides error handling for your custom type and provides default cleanup of resources (such as attached events) in its xamlDispose method. The samples that are shown here assume the use of a JavaScript type that defines fields that represent specific XAML DOM elements. This JavaScript type can be generated through Visual Studio automatically. In that case, the custom type can simply extend the prototype for this type. (In Visual Studio 2008, JavaScript IntelliSense will show these field members for the custom type.)

		
Type.registerNamespace("Custom");

Custom.Calculator = function(element) {
  Custom.Calculator.initializeBase(this, [element]);
	
  // Define private fields
  this._n0 = null;
  ..
}

Custom.Calculator.prototype = {
  xamlInitialize : function() { 
    Custom.Calculator.callBaseMethod(this, 'xamlInitialize');

    // Call on the component initialized to get the specific component's XAML element fields.
	this._initializeFields(this.get_element());
       
    // Additional initialization and event hookup. Note that these will be automatically 
    // dispoed in xamlDispose in the base class.
	var f = Function.createDelegate(this, this._numClick);
	this.addEventListener(this._n0, "mouseLeftButtonUp", f);
	..
  },
  _initializeFields: function(slhost) {
    var host = slhost.content;
    this._n0 = host.findName("n0");
    ..
  },
  ..
}
Custom.Calculator.registerClass('Custom.Calculator', Sys.Preview.UI.Xaml.Control);

The following example shows the complete calculator described previously, written in JavaScript.

Xaml server control with JavaScript: Calculator example

A Silverlight page (XAML file) can reference code written in a managed assembly by using the <x:Class> attribute. Event handlers can be attached using attributes in XAML. You can create a Silverlight project in tools such as Visual Studio 2008 Beta 2, in which you can create the XAML and a managed code assembly. These outputs can be referenced in the Xaml control. For details, see the Silverlight Quickstarts.

Note  You must use the Microsoft Silverlight 1.1 Alpha Refresh runtime for managed-code scenarios. It is suggested that you set the MinimumSilverlightVersion property of the Xaml control to 1.1.

		
<Canvas x:Name="parentCanvas"
  xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="OnPageLoaded" 
        x:Class="CustomClass;assembly=CustomAssembly.dll"
        Width="640" Height="480" Background="White"
        >
  ..

A Silverlight page (XAML file) can reference code written in a dynamic language by using the <x:Code> element. Event handlers can be attached using attributes in XAML.

Note  You must use the Microsoft Silverlight 1.1 Alpha Refresh runtime for managed-code scenarios. It is suggested that you set the MinimumSilverlightVersion property of the Xaml control to 1.1.

		
<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <x:Code Source="Simple.xaml.py" Type="text/python" />
  <Canvas Loaded="OnLoaded" />
  <TextBlock x:Name="TextBlock1"/>
</Canvas>

In this model, event handlers are implemented in the dynamic language as shown in the following examples.

		
def OnLoaded(sender, args):
    TextBlock1.Text = 'Hello, World!'

The following example shows a simple "Hello World" example written using the IronPython dynamic language.

Xaml server control with IronPython: Hello World example

The following example shows a simple "Hello World" example written using the Managed JScript dynamic language.

Xaml server control with Managed JScript: Hello World example

The following example shows the calculator example implemented in the IronPython dynamic language.

Xaml server control with IronPython: Calculator example

The following example shows the calculator example implemented in the Managed JScript dynamic language.

Xaml server control with Managed JScript: Calculator example