Silverlight (formerly codenamed Windows Presentation Framework Everywhere) will allow developers to create richer web applications than ever before. We will see a new wave of web based applications that are not only highly usable, but also very visually appealing. Web pages will be able to take advantage of flexible media playback, animation and vector graphic drawing. It will be especially useful on web applications that have a small number of pages, but are used heavily. For example, somebody working in a call center or a broker who is buying and selling stocks all day. This is the reason I chose a stock ticker tape application as my sample. It could be embedded into an existing web page, but provides a better looking ticker than the HTML
<MARQUEE> tag could ever hope to achieve.
I should mention that there are other ways of create the same visual experience that this sample provides, but I wanted to use a fairly simple example that people have seen before and to focus on the blending of the two technologies. There will be an ASP.NET AJAX UpdatePanel which is continuously getting new stock information while a Silverlight StoryBoard is presenting the information it retrieves. The key benefits of this solution are:
- We are using Extensible Application Markup Language (XAML) and Silverlight, so there is virtually no limit to what we can do to make it visually stimulating. This sample only uses basic coloring, there isn't any reason you couldn't use the functionality in Silverlight like opacity and vector based graphics. See Extensible Application Markup Language (Wikipedia article) for more information on XAML.
- Through the use of ASP.NET AJAX, there is no visible refreshing of the screen. The data is always up to date, with no flicker or waiting for the server to respond.
Originally my goal was to write an article about calling web services using managed code called from Silverlight. When I wrote the first version of this article, Silverlight didn't support managed code. Because of this limitation, I decided to write an article about ASP.NET AJAX integration. In the future, I may write an article that discusses using web services from Silverlight as a comparison of the two techniques.
- You will need a browser to view the sample. As of the Silverlight 1.1 Alpha, it is compatible with Firefox, Safari, and Internet Explorer with plans to support Opera in the future.
- To run this code, the client will need to install the correct version of the Silverlight plug in. It will prompt you to install it the first time you hit Ticker.aspx.
Development or Server Installation
- You will need a development environment that supports compiling the Microsoft .NET 2.0 Framework, for example Microsoft Visual Studio 2005 or Visual Web Developer Express Edition. The sample solution has been built and tested using Visual Studio 2005 Professional Edition.
- Install Silverlight. At the time of this article, the latest version was Silverlight 1.1 Alpha. To use a later version, the only change you should need to make is to update the Silverlight.js in the application.
- Install the Microsoft .NET Framework version 2.0. Note: Although Microsoft .NET Framework version 3.0 is required for Windows Presentation Framework (WPF), the Silverlight XAML runs under the plug in, so we only need version 2.0 to run ASP.NET AJAX.
- Install ASP.NET AJAX. You should be able to find it on the official site.
To run under Visual Studio 2005
- Set Ticker.apx as your start page.
- Run the solution. The sample works fine using the ASP.NET Development Server, but will also work under Internet Information Server (IIS) if so desired.
There are three high level concepts that will make it easier to understand the code.
To give the illusion of continuous motion, the application moves two
TextBlocks, which are only partially visible because they are outside the boundary of the Silverlight control. Once it reaches the end, the information from
tickerText2 is copied into
tickerText2 is updated with new information and the animation is restarted. Theoretically, there isn't any reason we couldn't use a larger number of
TextBlocks, but two seems to work well for this example.
Calling Web Services Using ASP.NET AJAX
<asp:ServiceReference> tag. When the page loads, we use the data returned from this web service to populate the XAML
TextBlock with some initial data.
Note: The following diagrams are UML Sequence diagrams. It describes different objects and the messages between them. See the Wikipedia article for a quick overview if needed.
(click to view larger image)
Using a Queue to Share Data Between Silverlight and ASP.NET AJAX
Because there is no guarantee that we will always get data back in time with AJAX, the application uses a ASP.NET
TextBox as a queue, which is running within an
UpdatePanel. ASP.NET AJAX continuously updates it, while Silverlight periodically pulls data off the queue.
(click to view larger image)
Description of Individual Files
The following are a list of the files that I have created or modified in this sample.
The following is the code that will instantiate the Silverlight plug in. If it has not been installed, it will prompt the user to download and install it.
//contains calls to silverlight.js, example below loads TickerTape.xaml
enableHtmlAccess: true },
The following ASP.NET AJAX code does a few important tasks. By adding the
<asp:ScriptManager runat="server" ID="scriptManager">
<asp:ServiceReference Path="StockUpdate.asmx" />
The following code will periodically call the server side code using AJAX enabled assembly which will populate the
<asp:UpdatePanel ID="StockPanel" runat="server">
<asp:Timer ID="RefreshTimer" runat="server" Interval="3000"
<asp:TextBox ID="NewStockQueue" runat="server" Width="500">
The XAML is run by the Silverlight plug in. It will show the ticker tape as it scrolls around the screen. The following are two
TextBlocks that will contain the stock market data.
<TextBlock x:Name="tickerText1" Canvas.Top="3" FontSize="12"
Foreground="Yellow" FontFamily="Arial Black" Text="" />
<TextBlock x:Name="tickerText2" Canvas.Top="3" FontSize="12"
Foreground="Yellow" FontFamily="Arial Black" Text="" />
StoryBoard will move the
TextBlocks to the left, until they reach the edge of the visible area. Then it will call the
RefreshTicker code, which copies the data from
tickerText2 with new data from the queue and restart the animation.
<Storyboard x:Name="tickerAnimation" Completed="RefreshTicker" >
Duration="0:0:16" From="1" To="-550" />
Duration="0:0:16" From="550" To="0" />
This is a very simple web service, that provides access to the
<asp:ServiceReference> tag, as well as the following changes are made to the code behind.
After adding a reference to the
System.Web.Extensions assembly in the GAC, add a reference to ASP.NET AJAX namespace.
// This is the ASP.NET AJAX reference we need
We also have to add a
ScriptService attribute to the class.
[WebService(Namespace = "http://randar.name/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class StockUpdate : System.Web.Services.WebService
This is a completely fake class that returns random stocks, along with some information such as prices and trends.
This is the default web.config when you use the "ASP.NET AJAX-Enabled Web Application" template in Visual Studio 2005.
Silverlight enables the creation of rich, visually stunning, and interactive experiences that can run on multiple browsers. But a pretty application without data is just a screensaver. There needs to be a way to efficiently and quickly pull data from the server and present it. ASP.NET AJAX is one of many ways it can be done, but it is definitely one of the best ways to create a highly usable web application.
- April 5th, 2007: First revision
- August 4th, 2007: Updated the code to work with the latest version of Silverlight. Updated article based on Microsoft renaming WPF/E to Silverlight.
Shipping product and getting teams to work at peak efficiency are my passions. I’m a firm believer in Agile methodologies, proper engineering practices with a focus on Software as a Service (SaaS). My extensive knowledge of technology as well as my passion, loyalty and ability to learn quickly will add value to any company. Many of my duties have included working closely with customers and I am known for being a great communicator of ideas and concepts.