Wahlin on .NET

Creating Your First Silverlight 2 App

Dan shows you how to take advantage of Silverlight 2's set of tools for Visual Studio 2008 to build an application.

• By Dan Wahlin
• 05/28/2008

When Silverlight was first released, it provided a solid framework for animating objects and displaying video in creative ways. However, it didn't provide built-in support for networking and only provided basic controls for displaying data. Silverlight 1's reliance on JavaScript also made it more difficult to use in cases where developers didn't have a good understanding of the JavaScript language.

Silverlight 2 ups the ante significantly by adding many new features that make Silverlight more attractive to .NET developers and easier to start using. Here's a quick list of some of the key features:

• Built-in subset of the CLR that runs on multiple operating systems.
• Support for C# and VB.NET code that runs in the browser.
• Support for Language Integrated Query (LINQ) and LINQ to XML.
• Built-in controls for capturing and displaying data.
• Support for accessing distributed data exposed through services (Web Services, REST, RSS and more).
• Built-in support for re-useable control styles.
• Ability to customize controls using templates.
• Support for embedded fonts .
• Data binding support.
• Dynamic layout features and support for full-screen mode.

.NET developers will find the move to Silverlight 2 easier compared to Silverlight 1 since familiar object-oriented concepts can be applied and used in Silverlight 2 applications. Silverlight 2 relies on common concepts such as assemblies, namespaces and classes.

Note: Silverlight 2 was at Beta 1 when this article was written. Some of the code and/or screenshots may change when the product is officially released.

Getting Started with Silverlight 2 and Visual Studio 2008
To get started building Silverlight 2 applications you'll need to visit http://silverlight.net/GetStarted and download the Silverlight 2 Tools for Visual Studio 2008. Once the tools are installed, you'll see a new Silverlight template appear in Visual Studio when creating projects, as shown in Figure 1.

After clicking OK, you'll be presented with an option to create a Web project that can be used to test your Silverlight application, as shown in Figure 2.

I personally prefer the default option, which creates a separate Web site with associated test pages for the Silverlight application. The second option adds an HTML page directly into the Silverlight project while the third option allows test pages to be added to an existing Web site.

Once the Silverlight project is created, you'll be taken to a Page.xaml file in the code editor window. Page.xaml represents the initial user interface for your application. It's similar to Default.aspx in ASP.NET applications or Form1.cs/Form1.vb in Windows Forms applications.

Controls, animations, transformations and other aspects of your Silverlight 2 application can be defined declaratively in Page.xaml using a specialized XML syntax called Extensible Application Markup Language (XAML). Although a complete discussion of XAML is outside the scope of this article, you'll find XAML tutorials on my blog.

Silverlight 2 provides many new controls that can be added into an application, as shown in Figure 3 (keep in mind that some of these Beta 1 controls may not make it into the final release and new controls may be added).

An example of defining a few controls including Grid, StackPanel, TextBlock, TextBox and Button in the Page.xaml file is shown in Listing 1.

In addition to supporting controls, Silverlight 2 allows C# or VB.NET code to be written to handle control events, retrieve data and perform other tasks. To add an event handler for the Button control shown earlier, you can add a Click attribute to the Button element in the XAML file, as shown next:

<Button x:Name="btnSubmit" Content="Submit" Height="20" 
   Margin="10" Click="btnSubmit_Click" />

Right-clicking anywhere within the Page.xaml file will present you with the View Code option that you're used to seeing in ASP.NET applications, and allow you to view the code file that supports the Page.xaml file. An example of a Silverlight 2 C# code file is shown in Listing 2.

Looking through the code, you'll see many familiar items including .NET namespaces that are available in Silverlight 2, a class that derives from the UserControl class, as well as the class' constructor. The code in the Button control's event handler updates the TextBlock control's Text property with the value entered into the TextBox.

This code only scratches the surface of what's available in Silverlight 2 applications. Using classes in the System.Net namespace, you can retrieve data from remote Web sites, access and parse RSS or ATOM data using the built-in RssSyndication class, and even generate Web Service proxy classes that can be used to call remote services asynchronously and bind data to controls. Silverlight even allows the look and feel of controls to be completely customized by adding control templates and styles into XAML.

I could go on and on about how the different features available in Silverlight 2 can be used to build dynamic applications but check out http://www.silverlight.net to see live examples and get a feel for what's possible.

Conclusion
Silverlight 2 provides a rich development environment that Windows Forms, WPF and ASP.NET developers alike can jump into with a little study and practice. While the goal of this article was to provide a basic introduction to Silverlight 2 features, there's much more to Silverlight 2 including media support, styles, control templates, data binding, distributed service calls, animations, transformations, etc.

Microsoft's Scott Guthrie posted a great set of tutorials that have been converted into videos that you can view if you're interested in jumpstarting the process of learning Silverlight 2 development techniques. The tutorials and associated videos are available at the following links:

• Part 1: Creating "Hello World" with Silverlight 2 and VS 2008 (Tutorial / Video Tutorial)
• Part 2: Using Layout Management (Tutorial / Video Tutorial)
• Part 3: Using Networking to Retrieve Data and Populate a DataGrid (Tutorial / Video Tutorial)
• Part 4: Using Style Elements to Better Encapsulate Look and Feel (Tutorial / Video Tutorial)
• Part 5: Using the ListBox and DataBinding to Display List Data (Tutorial / Video Tutorial)
• Part 6: Using User Controls to Implement Master/Details Scenarios (Tutorial / Video Tutorial)
• Part 7: Using Templates to Customize Control Look and Feel (Tutorial / Video Tutorial)
• Part 8: Creating a Digg Desktop Version of our Application using WPF (Tutorial / Video Tutorial)