Silverlight Stock Rates Rotator

• Download Sample project - 535.89 KB

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()
{
    // Just to see the loading effect
    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;
    // Change this to your local URL
    const string WebServiceUrl = 
      "http://localhost:11545/StockRotatorWeb/services/StockData.asmx";
    WebServices.StockDataSoapClient stockService;
    # endregion

    public Page()
    {
        InitializeComponent();

        // Initialize timer
        timer = new DispatcherTimer();
        timer.Interval = new TimeSpan(0, 0, 10);
        timer.Tick += new EventHandler(timer_Tick);
        // Initialize the web service proxy and add the event handler
        bind = new BasicHttpBinding();
        endPoint = new EndpointAddress(WebServiceUrl);
        stockService = new WebServices.StockDataSoapClient(bind, endPoint);
        stockService.GetStockDataCompleted += new 
          EventHandler<stockrotator.webservices.getstockdatacompletedeventargs>(
          stockService_GetStockDataCompleted);
        stockService.GetStockDataAsync();
        // Start the timer
        timer.Start();
    }
    // Invoked when the calling completed or timed out
    void stockService_GetStockDataCompleted(object sender, 
         StockRotator.WebServices.GetStockDataCompletedEventArgs e)
    {
        try
        {
            // Update the result
            txtResult.Visibility = Visibility.Visible;
            txtResult.Text = e.Result.ToString();
        }
        catch (Exception ex)
        {
            // Display the error
            txtResult.Text = ex.InnerException.Message;
        }
        finally
        {
            // Hide the loading textbloxk and restart the timer
            txtLoading.Visibility = Visibility.Collapsed;
            timer.Start();
        }
    }

    void timer_Tick(object sender, EventArgs e)
    {
        timer.Stop();
        txtLoading.Visibility = Visibility.Visible;
        txtResult.Visibility = Visibility.Collapsed;
        // Make the async call to the web service
        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 :)