Introduction
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”:
<canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns="http://schemas.microsoft.com/client/2007">
<canvas.triggers>
<eventtrigger routedevent="Canvas.Loaded">
<beginstoryboard>
<storyboard repeatbehavior="Forever"
storyboard.targetproperty="(Canvas.Left)" x:name="animation">
<doubleanimation duration="0:0:10" to="-820"
from="0" storyboard.targetname="txtResult">
</doubleanimation>
</storyboard>
</beginstoryboard>
</eventtrigger>
<border opacity="1" background="Red">
<textblock text=" Updating stock rates ...... please wait "
foreground="Wheat" x:name="txtLoading" />
</border>
<textblock x:name="txtResult">
</textblock></canvas.triggers></canvas>
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.
[WebMethod]
public string GetStockData()
{
System.Threading.Thread.Sleep(2000);
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());
return stockData.ToString();
}
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"
DispatcherTimer timer;
BasicHttpBinding bind;
EndpointAddress endPoint;
const string WebServiceUrl =
"http://localhost:11545/StockRotatorWeb/services/StockData.asmx";
WebServices.StockDataSoapClient stockService;
# endregion
public Page()
{
InitializeComponent();
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
EventHandler<stockrotator.webservices.getstockdatacompletedeventargs>(
stockService_GetStockDataCompleted);
stockService.GetStockDataAsync();
timer.Start();
}
void stockService_GetStockDataCompleted(object sender,
StockRotator.WebServices.GetStockDataCompletedEventArgs e)
{
try
{
txtResult.Visibility = Visibility.Visible;
txtResult.Text = e.Result.ToString();
}
catch (Exception ex)
{
txtResult.Text = ex.InnerException.Message;
}
finally
{
txtLoading.Visibility = Visibility.Collapsed;
timer.Start();
}
}
void timer_Tick(object sender, EventArgs e)
{
timer.Stop();
txtLoading.Visibility = Visibility.Visible;
txtResult.Visibility = Visibility.Collapsed;
stockService.GetStockDataAsync();
}
}
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 :)
+7 years of experience in designing and implementing Microsoft Based Solutions.
+5 years of experience in SharePoint implementations from MCMS 2002 to the latest version.
+3 years of experience as presales and technology advisory.
Strong analytic, design and client facing skills.
Strong record in consultation and presales with associated Gulf business understanding and market analysis.
Worked closely with Microsoft Kuwait & Qatar Offices SSPs, PTAs, PAMs and SAMs.
Extensive experience in BizTalk Server 2009, SSAS, PerformancePoint Services and Excel Services.
Active member in the Virtual Technology Specialist and Customer Immersion Experience programs.
Strong record in team leading and projects supervision.