AjaxControlToolkit, Silverlight and JavaScript

• Download source - 20.69 KB

Introduction

In this article, the author describes how to combine the AjaxControlToolkit (Ajax, ASP.NET), Silverlight (XamlControl) and JavaScript. In the example project, we are rotating a Canvas in a JavaScript function which is called by a slider.

For more interesting Silverlight articles, visit Codegod's Silverlight section.

The Concept

With Silverlight, one can create enhanced and rich user interfaces which can be displayed in a browser. These user interfaces are defined with the description-language XAML. With ASP.NET Futures, you can use the XamlControl to integrate such an XAML file into a WebForm. The goal of this article is to show how you can manipulate objects that are defined in an XAML file by JavaScript. This means that we have three technologies working together: ASP.NET, Ajax and Silverlight. As input-control, we are using a SliderExtender from the AjaxControlToolkit which is based on Ajax.NET.

Prerequisites

Before we can start, we have to install the needed software.

1. Visual Studio 2005 has to be installed on your machine
2. Download and install the ASP.NET Ajax Essential Components from here. These are:
• ASP.NET 2.0 AJAX Extensions 1.0
• ASP.NET Futures (July 2007)
• ASP.NET AJAX Control Toolkit

Create the Website

After installing the prerequisites, we can start with a new AjaxControlToolkit Website. Choose File->New Website->AjaxControlToolkit Website. Now your Website contains references to the AjaxControlToolkit.dll and the Microsoft.Web.Preview.dll. The first one is needed for the Toolkit's controls, the last one for the ASP.NET Futures controls (XamlControl).

The Example

In our example Website, we want to display an image with a border on a SilverLight-Canvas. Beyond that, we want to give the user the possibility to rotate the displayed image with a Slider-control. There should not be a postback when the user changes the slider-position so the image has to be rotated by clientside script. Alright, let's add an XAML page with a Canvas first. Here is the content of the file RotatingImage.xaml:

<Canvas

       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Width="640" Height="480"
       x:Name="rootCanvas"
       >

  <Canvas.Background>

    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
      <GradientStop Color="#FFAAAAAA" Offset="0"/>
      <GradientStop Color="#FFE2EAFF" Offset="0.5"/>
      <GradientStop Color="#FF666666" Offset="1"/>
    </LinearGradientBrush>

  </Canvas.Background>

  <Canvas Width="200" Height="200" x:Name="Cover" Canvas.Left="280" Canvas.Top="250">

    <Canvas.RenderTransform>
      <TransformGroup>
        <RotateTransform x:Name = "rotObj" CenterX="0.5" CenterY="0.5" Angle="0"/>
      </TransformGroup>
    </Canvas.RenderTransform>

    <Image Source="img/codegod.jpg" Stretch="Fill" Width="215" Height="120"/>

    <Path Stroke="White" Data="M0,0L215,0 215,120 0,120z" StrokeThickness="15"/>

  </Canvas>
</Canvas>

So we have a Canvas which has a size of 640x480 pixels. It has a linear gradient as background and a Canvas with a size of 200x200 pixels defined in the middle holding an image. This Canvas can be rotated by the Tag RotateTransform. What we want is to manipulate the property Angle in a JavaScript function when the user changes the position of the slider.

The Website's Layout

Here is the layout of the controls:

The XamlControl is an ASP.NET Servercontrol. It is added to the WebForm Default.aspx. The control has a property named XamlUrl which is the name of the XAML file we want to display. Below the XAML control, we place a TextBox which we want to use as a slider control. Now you ask: How can a TextBox be used as a Slider? The AjaxControlToolkit provides a set of control extenders that have the ability to extend ASP.NET servercontrols in their behaviour and appearance. Here is the markup for the SliderExtender.

<ajaxtoolkit:sliderextender ID="SliderExtender1" runat="server"
    BehaviorID="Slider1"
    TargetControlID="Slider1"
    Minimum="0"
    Maximum="360"
    Steps="360" RaiseChangeOnlyOnMouseUp="False" />
Rotate:  <asp:TextBox ID="Slider1" runat="server" AutoPostBack="True"
style="right:0px" Text="0"/>

As you can see, it has a BehaviourID that points to the control that should behave like a Slider. The TargetControlID points to the control that should hold the value of the slider.

Interaction with JavaScript

We want the slider to change the rotation-angle of the inner Canvas. This means that we have to react on the change-event of the slider's value (the TextBox). Therefore we register the JavaScript eventhandler onchange of the TextBox Slider1 in the Page_Load eventhandler of the Default.aspx.

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(Slider1);
    Slider1.Attributes.Add("OnChange",
        "sliderChanged('" + Slider1.ClientID + "');");
}

Now the function sliderChanged is called when the value of the slider changes. The next thing is to change the rotation-angle which means that we have to get the Canvas to rotate in our JavaScript function and manipulate the Angle property. The XamlControl has a property ClientXamlLoad . Here you can define the JavaScript method that is called when the XAML inside the XamlControl is fully loaded. In this function, we can get the Silverlight element RotateTransform and store it in a local variable. This variable is used in the function sliderChanged to get its property Angle and change the value. Here is the code:

<script type="text/javascript" language="javascript">

    var _rotObj;

    function SL_Loaded(sender, args)
    {
        // Get the RotateTransform-object of the Xaml-Canvas
        _rotObj = document.getElementById("Xaml1").content.findName('rotObj');
    }

    function sliderChanged( id )
    {
        // set the new rotation angle on slider-change
        var slider = document.getElementById(id);
        var rotAngle = slider.value;

        _rotObj.Angle = rotAngle;

    }

</script>

Not much code, isn't it? And the result looks really nice. Have fun with it, the project is attached.

History

• 27^th May, 2008: Initial post