Wahlin on .NET

Getting Started with Silverlight

Dan starts a new series of columns on Silverlight 1.0 by walking you through the fundamentals.

• By Dan Wahlin
• 10/01/2007

Unless you've been stuck on a deserted island for the past few months with no cell phone coverage or wireless access, you've more than likely heard about Silverlight, one of the latest technology releases related to Web development. It's the current "hot" thing, as far as client-side Web technologies go, and can be used to provide functionality that would be difficult to add using only HTML, CSS and JavaScript.

Over the past few months, I've focused on ASP.NET AJAX features and capabilities and described how Microsoft's AJAX framework can be used to enhance the end user experience. Starting with this article, I'm going to switch gears and begin discussing Microsoft's Silverlight product, starting with Silverlight 1.0, which has been officially released and is now available for use. However, Silverlight 1.1 is already in the works, so I'll discuss that as it gets closer to release. Down the road, I'll revisit ASP.NET AJAX and explain how it can be used in conjunction with Silverlight 1.0 to supply Silverlight applications with data.

What Is Silverlight 1.0?
A lot of people like to compare Silverlight to Adobe's Flash product. Silverlight is a plug-in, like Flash, that must be installed on an end user's computer in order to work and can be used in multiple browsers including Internet Explorer, Firefox and Safari. Silverlight also works on multiple operating systems, including Windows and Macintosh (a Linux version called Moonlight is also being developed outside of Microsoft). Once installed, Silverlight can be used to provide eye-catching animations, display movies, show ads, provide navigation and play games or music.

Silverlight is based on an XML format called Extensible Application Markup Language, normally referred to as XAML. XAML provides specialized XML tags that can be used to perform a variety of tasks, such as displaying ellipses, rectangles and lines, handling various media formats (.MP3, .WMV, .JPG, etc.), animating objects to create compelling visual effects, transforming objects, interacting with JavaScript and more.

XAML is also used to build Windows Presentation Foundation (WPF) applications. However, the XAML used in Silverlight is a more compact version than what's found in WPF. Listing 1 shows a simple XAML document that can be used with Silverlight to display and animate text. XAML uses <Canvas> elements for layout in a similar way that HTML uses <div> elements for layout. I'll provide additional details about writing XAML in future articles.

<Canvas 
 xmlns="http://schemas.microsoft.com/client/2007">
 <Canvas.Triggers>
  <EventTrigger RoutedEvent="Canvas.Loaded">
   <BeginStoryboard>
    <Storyboard>
     <DoubleAnimation AutoReverse="True" 
      From="80" To="200" Duration="0:0:3" 
      Storyboard.TargetName="tbCanvas"
      Storyboard.TargetProperty="(Canvas.Top)" 
      RepeatBehavior="Forever"/>
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Canvas.Triggers>
 <TextBlock Name="tbCanvas"
  Canvas.Left="36" Canvas.Top="80"
  Foreground="Maroon" FontFamily="Verdana" 
  FontSize="24" FontWeight="Bold"
  Text="Hello, From Silverlight!">
 </TextBlock>
</Canvas>

In addition to writing XAML to create Silverlight applications that run in the browser, Silverlight 1.0 allows JavaScript to be used to programmatically manipulate XAML elements, control animations and more. Silverlight 1.1 (currently in alpha) will allow C#, VB.NET and other languages to be used directly in the browser, which will be a welcome feature once it's released.

Silverlight Fundamentals
So how do you get started using Silverlight? First, take some time to explore the Silverlight Web site. The site contains several tutorials and the Silverlight SDK (with help files and examples), as well as numerous demonstrations on using Silverlight. You should download the Silverlight SDK because it contains help documentation and quickstart samples that help lower the learning curve and get you up-to-speed more quickly on XAML and Silverlight concepts.

To create a Silverlight application, you can install the Silverlight tools for Visual Studio .NET (available on the Silverlight site here) or create a page from scratch. Here are the basic steps to follow if you want to create a Silverlight application from scratch. I'll provide more specifics on these steps in the next article.

Step 1: Create a new ASP.NET Web site in Visual Studio .NET 2005. Why should you create an ASP.NET Web site? You don't have to use ASP.NET at all because Silverlight can be hosted in a standard HTML page. However, by creating an ASP.NET Web site you'll be able to leverage ASP.NET AJAX and other ASP.NET technologies if needed, which can be useful when the application needs to retrieve data from services.

Step 2: Add a file named Silverlight.js into your just-created Web site. I normally place it within a folder named Scripts that contains all JavaScript files used in the Web site. This is a file that Microsoft supplies and that automatically prompts users to install Silverlight if they don't have it, or loads Silverlight if it's already installed. You can get the Silverlight.js file from the Silverlight SDK mentioned earlier or from the code download available with this article.

Step 3: Create a XAML file that contains the shapes, media, animations or transformations that the application should perform.

Step 4: Add an HTML or ASP.NET page into your Web site that will host the Silverlight control. This page will define a <div> container where the Silverlight control will be placed in the page.

Step 5: Create an instance of the Silverlight control using JavaScript and set properties on it, such as where to get the XAML used to control the application's display. This can be done in the page itself or preferably in a separate .JS file. Microsoft examples normally name this file CreateSilverlight.js.

I'll drill down into these steps in the next article and provide addition details about what the Silverlight.js file does. Until then, feel free to examine the downloadable code available with this article. It provides a simple starter Silverlight application that you can explore to learn the fundamentals.

• Get Code Download