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.
<StackPanel>
<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" />
</StackPanel>
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" />
</StackPanel>
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.
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,
}).ToList<Model.Photo>();
Conclusion
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.
