| AjaxControlToolkit, Silverlight and Javascript |
| Section: Silverlight | Rating: Not rated yet! |
 | CodeGod submitted this resource
The member's homepage is http://www.codegod.de
Visit the profile here |
Attachment
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.
Figure 1The concept
With Silverlight one can create enhanced and rich user interfaces which can be displayed in a browser. These userinterfaces are defined with the description-language XAML. With ASP.NET Futures you can use the XamlControl to integrate such a XAML-file into a WebForm. The goal of this article is to show how you can manipulate objects that are defined in a XAML-file by javascript. This means that we have 3 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.
a) VS 2005 has to be installed on your machine.
b) 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 a 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 he position of the slider
The WebSite's Layout
Here is the layout of the controls:
Figure 2The 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. In our case these properties have the same value ? the ContrlID of the TextBox Slider1.
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 sliderChnaged to get it's property Angle and change the value. Hers 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.