Silverlight is a rich framework that works in web browsers using a browser plug-in, just like Flash, but with it, you can interact more easily with .NET libraries. Silverlight has the same code-behind model that exists in ASP.NET, and operates under a modified light version from the .NET framework. With Silverlight, you can build Flash-like applications with full .NET server side code integration. Now, I’ll go through how to build a stock rates rotator with Silverlight and embed it into an ASPX page, step by step. First, you have to download the Silverlight Tools Beta 2 For Visual Studio 2008.
Using the code
Open Visual Studio 2008, and open a new project, select the Silverlight node under Visual C#, and select Silverlight Application:
Click OK to proceed to the following screen:
Select the first option to add a new web site to test your Silverlight controls, and click OK.
Notice these files in you solution:
- App.xaml: The entry point for your application that tells which control to begin with, and within it, you can declare the shared variables.
- Page.xaml: A Silverlight control which will hold the XAML and has a code-behind file “Page.xaml.cs” which holds the server side code.
Now, I’ll start developing the email form in “Page.xaml”:
<doubleanimation duration="0:0:10" to="-820"
<border opacity="1" background="Red">
<textblock text=" Updating stock rates ...... please wait "
foreground="Wheat" x:name="txtLoading" />
I made the animation to rotate the “
txtResult” textblock from right to left forever. This is a very simple animation; also, I added another textblock to simulate the loading effect. Now, I’ll code the web service which will provide the stock rates to the Silverlight control.
public string GetStockData()
StringBuilder stockData = new StringBuilder();
Random randomRate = new Random();
stockData.Append("USD " + randomRate.NextDouble() + " | ");
stockData.Append("KD " + randomRate.NextDouble() + " | ");
stockData.Append("GBP " + randomRate.NextDouble() + " | ");
stockData.Append("EGP " + randomRate.NextDouble() + " | ");
stockData.Append("AUD " + randomRate.NextDouble());
It’s a very simple web method just to return the required string. Now, we must code calling the web service from the Silverlight control.
public partial class Page : UserControl
# region "Public members"
const string WebServiceUrl =
timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 10);
timer.Tick += new EventHandler(timer_Tick);
bind = new BasicHttpBinding();
endPoint = new EndpointAddress(WebServiceUrl);
stockService = new WebServices.StockDataSoapClient(bind, endPoint);
stockService.GetStockDataCompleted += new
void stockService_GetStockDataCompleted(object sender,
txtResult.Visibility = Visibility.Visible;
txtResult.Text = e.Result.ToString();
catch (Exception ex)
txtResult.Text = ex.InnerException.Message;
txtLoading.Visibility = Visibility.Collapsed;
void timer_Tick(object sender, EventArgs e)
txtLoading.Visibility = Visibility.Visible;
txtResult.Visibility = Visibility.Collapsed;
And this is the test page in action:
And, this with the data displayed:
Points of interest
Silverlight is a very powerful tool that every web developer should learn. Calling XAML and web services from Silverlight is a very interesting topic.
I hope that you liked this article, I'm waiting for your comments guys :)