Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Article

Silverlight Stock Rates Rotator

Rate me:
Please Sign up or sign in to vote.
3.50/5 (8 votes)
5 Jul 2008CPOL2 min read 38.2K   260   29   6
Marquee like Silverlight text rotator - implements web service calling and animation.

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:

NewProject.JPG

Click OK to proceed to the following screen:

SelectWeb.JPG

Select the first option to add a new web site to test your Silverlight controls, and click OK.

Solution.JPG

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”:

XML
    <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.

C#
[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.

C#
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:

Loading.....JPG

And, this with the data displayed:

Loaded.JPG

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 :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect INC Technologies
Kuwait Kuwait
+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.

Comments and Discussions

 
QuestionGood work ! Pin
Musthafa (Member 379898)17-Sep-12 21:25
Musthafa (Member 379898)17-Sep-12 21:25 
GeneralException at web services level Pin
kazim bhai21-Nov-09 11:39
kazim bhai21-Nov-09 11:39 
GeneralGood Work Pin
Viral Upadhyay4-Feb-09 18:26
Viral Upadhyay4-Feb-09 18:26 
QuestionSample project ? Pin
Bizounours7-Jul-08 1:36
Bizounours7-Jul-08 1:36 
AnswerRe: Sample project ? Pin
Ahmed Shokr7-Jul-08 1:57
Ahmed Shokr7-Jul-08 1:57 
AnswerRe: Sample project ? Pin
Ahmed Shokr7-Jul-08 12:12
Ahmed Shokr7-Jul-08 12:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.