|
Silverlight 2 offers many new features previously unavailable in version 1
April 12, 2008
URL:http://www.drdobbs.com/tools/whats-new-in-silverlight-2/207200289
Dan Wahlin is a .NET development instructor and architecture consultant at Interface Technical Training. Dan founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, and Web Services in Microsoft's .NET platform. Dan blogs at http://weblogs.asp.net/dwahlin and http://blogs.interfacett.com/dan-wahlins-blog.
Rich Internet Applications (RIAs) provide a way to build dynamic user interfaces that simplify the process of accessing and displaying data to end users. Microsoft's Silverlight 2 product adds many new features that let .NET developers more easily build RIAs without facing the large learning curve normally associated with new technologies. The learning curve is still there, of course, but by leveraging your existing VB.NET or C# skills you can minimize the slope and begin building applications more quickly.
In this article I introduce new features available in Silverlight 2 and discuss why they're important. Many advancements have been made since the release of Silverlight 1 that are key especially if your applications target a variety of browsers and end users. In future articles, I will drill-down into new features and provide additional details on how they can be used to build RIAs using Silverlight 2.
One of the most important advancements available in Silverlight 2 is the inclusion of a mini Common Language Runtime (CLR) that can run on multiple operating systems including Windows and Macintosh (with Linux support coming through the Moonlight project. Version 2 lets you write VB.NET or C# code that will run in Internet Explorer, FireFox, and Safari which means you don't have to use JavaScript any longer as with Silverlight 1. As a result, you can leverage your existing programming skills to build Silverlight 2 applications without having to learn a new language or object model. Several of the namespaces and classes available in the full version of the .NET Framework are also available to use in Silverlight 2.
Listing One presents an example of handling a Button control's Click event using C#. Looking through the code, you'll see that it looks a lot like standard ASP.NET event handler code aside from the RoutedEventArgs parameter that is passed.
private void btnSearch_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Alert("Button Clicked!");
}
Silverlight 1 provides a solid framework for building RIAs using XML Application Markup Language (XAML) and JavaScript. Using XAML elements available in version 1 along with some JavaScript code you can animate objects in creative ways, skew and resize objects and interact with data dynamically using AJAX technologies and Web Services. However, many developers coming from an ASP.NET or Windows Forms background wondered (aloud at times) where all of the controls were for capturing user input and displaying collections of items. Aside from the TextBlock control, the MediaElement control and shape controls such as Rectangle and Ellipse, no user input or data display controls were available in version 1 and laying out data on a page wasn't as straightforward as it should be. I've heard more than more developer ask, "Where are the controls?"
The good news is that Silverlight 2 provides more than 25 controls that can be used to layout other controls as well as capture and display data. All of the controls can be defined in XAML or created dynamically through VB.NET or C# code. Each control exposes properties, methods and events typically found in ASP.NET and Windows Forms controls, and can even be customized through styles (see www.corrina_b.members.winisp.net/skins/rough/Testpage.html for an example). Figure 1 shows what the Silverlight 2 project Toolbox looks like in Visual Studio 2008.
Silverlight 2 controls can generally be classified into several categories including layout controls, user input controls, media controls, shape controls, and a few miscellaneous controls.
Let's take quick look at new layout, user input, and media 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.
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>
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.
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>();
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.
Terms of Service | Privacy Statement | Copyright © 2024 UBM Tech, All rights reserved.