In this article, the author describes how to combine the AjaxControlToolkit (Ajax, ASP.NET), Silverlight (
For more interesting Silverlight articles, visit Codegod's Silverlight section.
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
SliderExtender from the AjaxControlToolkit which is based on Ajax.NET.
Before we can start, we have to install the needed software.
- Visual Studio 2005 has to be installed on your machine
- 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 (
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:
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFAAAAAA" Offset="0"/>
<GradientStop Color="#FFE2EAFF" Offset="0.5"/>
<GradientStop Color="#FF666666" Offset="1"/>
<Canvas Width="200" Height="200" x:Name="Cover" Canvas.Left="280" Canvas.Top="250">
<RotateTransform x:Name = "rotObj" CenterX="0.5" CenterY="0.5" Angle="0"/>
<Image Source="img/codegod.jpg" Stretch="Fill" Width="215" Height="120"/>
<Path Stroke="White" Data="M0,0L215,0 215,120 0,120z" StrokeThickness="15"/>
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
The Website's Layout
Here is the layout of the controls:
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
<ajaxtoolkit:sliderextender ID="SliderExtender1" runat="server"
Steps="360" RaiseChangeOnlyOnMouseUp="False" />
Rotate: <asp:TextBox ID="Slider1" runat="server" AutoPostBack="True"
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.
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 Slider1 in the
Page_Load eventhandler of the Default.aspx.
protected void Page_Load(object sender, EventArgs e)
"sliderChanged('" + Slider1.ClientID + "');");
Now the function
Angle property. The
XamlControl has a property
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:
function SL_Loaded(sender, args)
_rotObj = document.getElementById("Xaml1").content.findName('rotObj');
function sliderChanged( id )
var slider = document.getElementById(id);
var rotAngle = slider.value;
_rotObj.Angle = rotAngle;
Not much code, isn't it? And the result looks really nice. Have fun with it, the project is attached.
- 27th May, 2008: Initial post