Channels ▼

Web Development

What's New in Silverlight 2?

Layout Controls

Silverlight 1 provides a Canvas control that can be used to layout objects in an application. Using attached properties such as Canvas.Left and Canvas.Top you can define where a particular object should be positioned on an interface. While the Canvas control gets the job done, it isn't very flexible especially compared to layout techniques available in HTML.

Silverlight 2 adds new layout controls such as StackPanel and Grid that allow for more flexible layouts to be created that adjust as users adjust the size of their browser or move in and out of full-screen mode. The Grid can be used to position controls in a table-like layout with rows and columns while the StackPanel control can "stack" controls horizontally or vertically.

An example of using the StackPanel control is shown in Listing Two. This example stacks two TextBlock controls and an Image control vertically. Spacing between the controls is defined through each control's Margin property which allows left, top, right, and bottom margins to be defined.

    <TextBlock x:Name="tbTeam2" Text="Team Score" 
      HorizontalAlignment="Center"  FontFamily="Tahoma" 
      Foreground="Black" FontSize="25" Margin="2" />
    <TextBlock x:Name="tbTeam2Score" Text="0" HorizontalAlignment="Center" 
      FontFamily="Arial Black" FontSize="30" Foreground="Navy" 
      Margin="0,0,0,0"  />
    <Image x:Name="BB2" Opacity="0.0" Source="BB.png" Height="50" Width="50" 
      HorizontalAlignment="Left" Margin="5,-45,0,5" />
Listing Two: Using the StackPanel control to "stack" controls vertically.

By using the new layout controls you can more easily position controls in an interface without hard-coding exact X/Y coordinates. By combining layout controls you can create more flexible interfaces that work well with different end user screen resolutions.

User Input Controls

Silverlight adds several new user input controls to more easily capture data without relying on HTML controls. Standard controls such as TextBox and Button are included as well as more sophisticated controls such as DataGrid, Slider, and ToggleButton. By using the controls you can let users enter data that can be sent to a Web Service or other type of service.

Listing Three is an example of using some of the available user input controls.

<StackPanel Orientation="Horizontal">
    <WatermarkedTextBox x:Name="txtSearchText"  
      Watermark="Search Text" Height="20" Width="150" Margin="10" />
    <Button x:Name="btnSearch" Content="Get Images" Margin="10" Width="115" 
      Height="20" Click="btnSearch_Click"></Button>
    <RadioButton x:Name="rdoLarge" Content="Large" Margin="10" 
      IsChecked="True" />
    <RadioButton x:Name="rdoSmall" Content="Small" />
Listing Three: User input controls are now included in Silverlight 2 and make the process of capturing data much easier compared to Silverlight 1.

Media Controls

The ability to display media has always been a key feature since Silverlight was first released. Silverlight 2 still offers the MediaElement control available in version 1 that can be used to display Windows Media files or play MP3 or WMA files. In addition to the MediaElement control, the new MultiScaleImage control allows Microsoft's Deep Zoom technology to be used directly within Silverlight applications as well. Deep Zoom lets users zoom in and out of images quickly without experiencing pixilation normally associated with image zooming. You can see the MultiScaleImage control in action at the Hard Rock's memorabilia site; see Figure 2.

[Click image to view at full size]
Figure 2: The Hard Rock memorabilia site uses the Silverlight 2 MultiScaleImage control to let users zoom in and out of images.

Microsoft ships a tool that supports the MultiScaleImage control named Deep Zoom Composer. The tool lets you arrange multiple images and package them into a file format that the MultiScaleImage control can read and display.

How Do I Retrieve Data?

In addition to the new controls available in Silverlight 2, new networking features have also been added that allow applications to retrieve data from a variety of sources. In Silverlight 1 the only option for retrieving data from a server was through AJAX and Web Services. Silverlight 2 allows data to be retrieved from Web Services, REST APIs and even sockets using built-in classes such as WebClient, HttpWebRequest, and Socket.

XML or JSON data received from a service can be parsed and mapped to custom CLR objects in a Silverlight project using several different technologies. For example, to parse XML data you can use the XmlReader, XmlSerializer or LINQ to XML classes. JSON can be serialized and deserialized using the DataContractJsonSerializer class and RSS and ATOM feeds can be parsed and integrated into a Silverlight application using classes such a SyndicationFeed. Listing Four shows an example of using LINQ to XML to parse XML data. This example parses an XML file retrieved from Flickr's REST service that contains photo information.

List<Model.Photo> photos = (from photo in doc.Descendants("photo")
                            select new Model.Photo
                                Farm = photo.Attribute("farm").Value,
                                ID = photo.Attribute("id").Value,
                                Owner = photo.Attribute("owner").Value,
                                Secret = photo.Attribute("secret").Value,
                                Server = photo.Attribute("server").Value,
                                Title = photo.Attribute("title").Value,

Listing Four: This example shows how XML data can be "projected" into a custom CLR object named Photo.


Silverlight 2 offers many new features previously unavailable in version 1 such as the ability to write C# or VB.NET code that runs in the Internet Explorer, Firefox, and Safari browsers. Version 2 also provides many new controls that can be used to capture user input and display collections of items. Finally, networking features in Silverlight 2 allow data from local and remote services to be integrated into applications.

In this article, I only scratched the surface of available features in Silverlight 2. There's quite a bit more to the overall framework that will be discussed in future articles. In the meantime, check out my blog to view Silverlight tutorial videos and other related topics.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.