Using the Silverlight Server Control

The Silverlight control enables you to render a .xap application package which is created by using XAML and managed code.

The following example shows the declarative markup for a Silverlight server control that is configured to reference the .xap application packaged named myExample.xap.

  <asp:Silverlight
   ID="Xaml1"
   runat="server"
   Source="~/ClientBin/myExample.xap"
   MinimumVersion="2.0.30523"
   Width="100%"
   Height="100%">
</asp:Silverlight>

The Silverlight control creates the Sys.UI.Silverlight.Control client script class (based on the model used in the ASP.NET AJAX Extensions) that provides a JavaScript programming model to control the client player.

Creating a Managed-Code Assembly to Use with the Silverlight Server Control

A XAML file can reference code written in a managed assembly by using the x:Class attribute. Event handlers can be attached by using attributes in XAML. You can create a Silverlight project in development environments such as Visual Studio 2008, in which you can create XAML and a managed-code assembly. These outputs can be referenced in the Silverlight server control.

Note: To run .xap files from IIS, you must have the .xap file name extension associated with a MIME type of " application/x-silverlight-app".

The following example shows the contents of a XAML element that references a managed-code assembly.

You can reference this XAML file through the Source property of the Silverlight server control. You must also make sure that the MinimumVersion property is set appropriately. The following example shows how to do this. Although the XAML that is downloaded references the managed code, the framework generates a client base Sys.UI.Silverlight.Control instance. This lets you provide additional JavaScript interaction in a manner consistent with the Microsoft ASP.NET AJAX Extensions model.

The following example shows how to use the Silverlight control with a managed-code assembly. The Silverlight control enables you to render a .xap application package which is created by using XAML and managed code. This example includes a Web page (.aspx), a XAML page (.xaml) and the code-behind for the XAML page.

The following code shows how to include the Silverlight server control in a Web page. The Source attribute of the Silverlight server control references the .xap application package.

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head id="Head1" runat="server">
    <title>Test Page For myExample</title>
</head>
<body style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div style="height:100%;">
            <asp:Silverlight ID="Xaml1" runat="server" Source="../ClientBin/myExample.xap" MinimumVersion="2.0" Width="100%" Height="100%" />
        </div>
    </form>
</body>
</html>

The following code shows a XAML example (page.xaml) that is included in the .xap application package referenced in the earlier code example.

XAML

The following code shows the supporting code-behind (page.xaml.cs or page.xaml.vb) for the previous XAML example (page.xaml).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace myExample
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
        void OnClick1(object sender, RoutedEventArgs e)
        {
            btn1.Foreground = new SolidColorBrush(Colors.Blue);
            text1.Text = "Click event handled on Hover.";
            text3.Text = "";
        }

        void OnClick2(object sender, RoutedEventArgs e)
        {
            btn2.Foreground = new SolidColorBrush(Colors.Green);
            text2.Text = "Click event handled on Press.";
            text3.Text = "";
        }

        void OnClick3(object sender, RoutedEventArgs e)
        {
            btn1.Foreground = new SolidColorBrush(Colors.Green);
            btn2.Foreground = new SolidColorBrush(Colors.Blue);
            text1.Text = "";
            text2.Text = "";
            text3.Text = "Click event handled on Release.";
        }
    }
}

Using JavaScript and XAML with the Silverlight Server Control

The following example shows the markup for a Silverlight server control that defines a simple calculator in XAML. The logic for interacting with the XAML is defined in a separate JavaScript class. The Silverlight server 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:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Name="SilverlightControl.js"
        Assembly="System.Web.Silverlight"/>
                <asp:ScriptReference Path="calculator.js" />
            </Scripts>
        </asp:ScriptManager>

        <asp:Silverlight runat="server" ID="Silverlight1"
   Height="340"
   Width="320"
   Source="../calculator.xaml"
   ScriptType="Custom.Calculator"
   OnPluginError="onXamlError">

In its basic form, the Silverlight server control provides a JavaScript type that includes members such as the onPluginLoaded method and the onPluginError method. The Silverlight server control references a XAML file through the Source property. The code for interacting with the XAML can be in a managed-code assembly or in a client JavaScript library (.js file).

Creating a Class in JavaScript to Use with the Silverlight Server Control

To create a class in JavaScript to use with the Silverlight server control, you can use the Microsoft ASP.NET AJAX Extensions client framework and create a type that derives from the Sys.UI.Silverlight.Control base class. This enables you to attach event handlers to XAML DOM elements during the pluginLoaded event. This event is raised when the XAML DOM is loaded and ready. The framework provides error handling for your custom type and provides default cleanup of resources (such as attached events) in its pluginDispose method.

The following example shows a client class that derives from the Control base class.

Type.registerNamespace("Custom");

Custom.Calculator = function(element) {
      Custom.Calculator.initializeBase(this, [element]);

      this._designer = new designerCalc();
      this._value1 = "";|
    this._operator = "=";
    this._recentOperator = true;
}

Custom.Calculator.prototype = {
    _events: null,
      onPluginLoaded : function(args) {
            Custom.Calculator.callBaseMethod(this, 'onPluginLoaded', new Array(args));

        // Call on the component initialized to get the specific component's XAML element fields.
            this._designer.initializeComponent(this.get_element());

            // Hookup event handlers as required in this custom type.
            var f = Function.createDelegate(this, this._numClick);

            this.addEventListener(this._designer.n0, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n1, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n2, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n3, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n4, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n5, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n6, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n7, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n8, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.n9, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.fplus, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.fminus, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.fmultiply, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.fequals, "mouseLeftButtonUp", f);
            this.addEventListener(this._designer.fdivide, "mouseLeftButtonUp", f);
            // Set initial value
            this._designer.result.Text = "0";
      },
      _numClick : function(sender, e) {
        var s = sender.children.getItem(2).Text;

        if ("=-+/*".indexOf(s) !== -1) {
            if (!this._recentOperator) {
                if (this._operator === "=") {
                    this._value1 = this._designer.result.Text;
                }
                else {
                    if ((this._operator === "/") && (parseFloat(this._designer.result.Text) === 0)) {
                        this._designer.result.Text = "Error";
                        this._value1 = "0";
                        s = "=";
                    }
                    else {
                        var value = eval("parseFloat(this._value1) " + this._operator + " parseFloat(this._designer.result.Text);");
                        value = String(value).substr(0, 12);
                        this._value1 = value;
                        this._designer.result.Text = this._value1;
                    }
                }
            }

            this._operator = s;
            this._recentOperator = true;
            return;
        }

        if (this._recentOperator) {
            this._designer.result.Text = s;
            this._recentOperator = false;
        }
        else {
            this._designer.result.Text += s;
        }
      }
}
Custom.Calculator.registerClass('Custom.Calculator', Sys.UI.Silverlight.Control);

Extending the Silverlight Server Control

The Silverlight server control is a control that provides the basics for XAML in addition to supporting the Silverlight installation logic for you. In some cases, you might want to create a class that inherits from the Silverlight control and then expose your own members, much like the implementation of the MediaPlayer control.

ASP.NET Silverlight Server Control

Using the Silverlight Server Control

Creating a Managed-Code Assembly to Use with the Silverlight Server Control

Using JavaScript and XAML with the Silverlight Server Control

Creating a Class in JavaScript to Use with the Silverlight Server Control

Extending the Silverlight Server Control