CHAPTER 14    327 Silverlight Introduction Availability: Framework 3.5sp1 Onward “Silverlight is a new web presentation technology that is created to run on a variety of platforms. It enables the creation of rich, visually stunning and interactive experiences that can run everywhere: within browsers and on multiple devices and desktop operating systems (such as the Apple Mac).” http://silverlight.net/content/GetStarted.aspx Some might say that Silverlight is Microsoft’s version of Adobe’s Flash and Flex products. This doesn’t really do it justice, though. Silverlight has a number of compelling features that make it an ideal choice for creating web applications with the functionality traditionally only found in desktop applications. These applications are known as Rich Internet Applications (or RIA to its friends). Silverlight offers the following: • Ability to use the .NET development tools you know and love • Utilize many of the .NET framework libraries in your applications (for security reasons, not everything is available) • An easy-ish path to convert web applications to desktop (WPF) applications if required in the future (also check out Silverlight 3’s offline capabilities in Chapter 15) • Great media-streaming capabilities • Support for designers (more prevalent in Blend) Although Silverlight was available for earlier versions of .NET and Visual Studio, I decided to include a brief introduction because Silverlight was released between VS2008 and VS2010, and I suspect that many developers are not aware of how easy it is to use. I believe Silverlight will grow in importance and is something that all .NET developers should at least be aware of. Silverlight versus Flash When Silverlight was first released, it was inevitable that it would be compared to Adobe Flash (and Flex) due to its similar function. Although there is overlap between the two products, I don’t think Microsoft’s primary intention was to just launch a competing product. CHAPTER 14  SILVERLIGHT INTRODUCTION 328 Silverlight’s development was the obvious offshoot of WPF, and there was no satisfactory technology for the Microsoft developer to create RIAs prior to its release. Options such as ActiveX controls or embedded Windows forms suffered from being difficult to develop and debug, were not cross-platform, and had security and deployment issues. For a taste of just what is possible using Silverlight, take a look at the upcoming Microsoft Office Online application (http://channel9.msdn.com/posts/PDCNews/First-Look-Office-14-for-Web/). Office Online utilizes Silverlight to provide online versions of Word, Excel, and PowerPoint. Perhaps the biggest advantage offered by Silverlight is that applications can be written using the .NET framework and existing Microsoft tools such as Visual Studio. This immediately lowers the entry barrier to new developers and gives them access to much more functionality. Although Flash is almost certainly installed on more browsers than Silverlight, at the time of writing, Microsoft is in a strong position to encourage uptake of Silverlight (subject to future possible antitrust legislation!). It is hard to get accurate statistics about Silverlight uptake, but the sites http://www.riastats.com/ and http://www.statowl.com/silverlight.php are well worth a look. At the time of writing, they indicate that roughly 25 percent of browsers have some version of Silverlight installed. Adobe indicates that it has a much higher uptake, which is to be expected with a more mature product: http://www.adobe.com/products/player_census/flashplayer/. Silverlight in the Real World An impressive example of a Silverlight application is “Descry: A Website Named Desire” that was created for the Mix conference. This web site illustrates the web site development process (see Figure 14-1) and is available online at http://www.visitmix.com/labs/descry/awebsitenameddesire/. Figure 14-1. Descry example project from Mix team (http://www.visitmix.com/labs/ descry/awebsitenameddesire/) CHAPTER 14  SILVERLIGHT INTRODUCTION 329 One of the earliest but still very impressive uses of Silverlight is on the Hard Rock Café’s memorabilia page. If you haven’t seen it, go to it now at (http://memorabilia.hardrock.com/). The page shows rock memorabilia items owned by the Hard Rock café (see Figure 14-2). The user can fluidly zoom in and out to display more detail of any individual item. This site was created with Silverlight and a technology called Deep Zoom.  NOTE Deep Zoom is freely available for your use if you want to create a similar application: http://msdn. microsoft.com/en-us/library/cc645050(VS.95).aspx. Although a relatively new technology, Silverlight has already been put to the test when it was used very successfully to stream coverage of the Beijing Olympics for NBC. Brian Goldfarb (group product manager) said Silverlight streamed more than 250TB of data over this period (http://www.eweek.com/ c/a/Application-Development/Microsoft-Proving-Ground-Silverlight-at-the-Olympics/). Interested? You should be. Take a look at the technology stack Silverlight is built on. Figure 14-2. Hard Rock Café memorabilia page (http://memorabilia.hardrock.com/) CHAPTER 14  SILVERLIGHT INTRODUCTION 330 WPF As part of.NET framework version 3.0, Microsoft released Windows Presentation Foundation (WPF): a new way of creating UIs for applications. Silverlight uses a subset of the full WPF and .NET framework. You will find some classes and methods unavailable, and anything with the SecurityCritical attribute cannot be used. Why not use the full WPF and .NET framework? • Silverlight is a browser plug-in, so it needs to be small. • Some WPF functionality might present a security risk when run in the browser. • Not all WPF functions are cross-platform. XAML Silverlight applications are developed using eXtensible Application Markup Language (XAML). XAML is an XML-based language that is used to describe objects. XAML is used in other areas of .NET such as WPF and WCF. You can expect to see Microsoft making increasing use of XAML for many different purposes in the future. Silverlight Requirements and Installation To develop Silverlight applications, you will require one of the following: • Visual Studio 2008 and Silverlight Tools for Visual Studio and .NET 3.5sp1 • Visual Studio 2010 Expression Blend The design time support for WPF and Silverlight applications is greatly improved in Visual Studio 2010 (see Chapter 17), but for serious Silverlight development a separate product called Expression Blend is almost essential. Expression Blend (written using WPF) is very much aimed at designers and eases tasks such as layout, animation, and customization of controls. You will still need to edit code in Visual Studio, but Visual Studio and Blend play well together so you can have both open at the same time and skip between them. When a designer and a developer work at the same time on an application, there can be issues as one developer’s changes overwrite the others. Microsoft has tried to address this with a declarative data binding syntax and design of Blend. I am not sure they have fully achieved this lofty aim, but it is a step in the right direction. If you want to see whether Blend is worth using for you, download the free trial version of Blend from the main Silverlight.net site at http://silverlight.net/GetStarted/. CHAPTER 14  SILVERLIGHT INTRODUCTION 331 Figure 14-3. Expression Blend Designer Creating a New Silverlight Project Get started creating a new Silverlight project. 1. Open Visual Studio. 2. Select File➤ New Project. 3. Select the C# node and then the Silverlight node. 4. Select Silverlight Application. 5. Call your project Chapter14.HelloSilverlight. 6. Make sure the “Host the Silverlight application in a new Web site” option is selected (this will be essential later on). 7. Click OK. Visual Studio will now create a Silverlight solution for you to use. CHAPTER 14  SILVERLIGHT INTRODUCTION 332 Project Structure Visual Studio has created two projects (see Figure 14-4): • Chapter14.HelloSilverlight • Chapter14.HelloSilverlight.Web Why two projects? • Chapter14.HelloSilverlight.Web acts as a host or test harness for the application. • Chapter14.HelloSilverlight contains the Silverlight code. In the future, you might not want to create a separate hosting project. If so, don’t check the add a new ASP.NET web project option. If you do this then Visual Studio will dynamically generate a page to display your Silverlight application when run (see Figure 14-4). Figure 14-4. Silverlight default project setup CHAPTER 14  SILVERLIGHT INTRODUCTION 333 Hi Yo, Silver! Let’s create a Hello World (or Hi yo Silver) application: 1. Open the file ~\MainPage.xaml. 2. By default, MainPage.xaml will contain a Grid tag like the following: <Grid x:Name="LayoutRoot" Background="White"> </Grid> Silverlight and WPF allow you to nest tags inside one another. Enter the following between the Grid tags: <TextBlock>Hi yo Silver</TextBlock> You should now have something like the following: <UserControl x:Class="Chapter14.HelloSilverlight.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> <TextBlock>Hi yo Silver</TextBlock> </Grid> </UserControl> 3. Press F5 to run your application. You should see the text Hi yo Silver displayed on a page. Understanding the Basics Let’s run through the lines of code to understand what they do. The following line tells the compiler which class to inherit from. (It is similar to ASP.NET’s inherits property in an .aspx or .ascx file.) x:Class="Chapter14.HelloSilverlight.MainPage" The lines beginning with xmlns import a number of WPF- and Silverlight-related namespaces (such as a using or imports statement). The following line creates a TextBlock on the page and sets the text to Hi yo Silver: <TextBlock>Hi yo Silver</TextBlock>  NOTE Hi yo, Silver was a line said by the Lone Ranger as he rode away on his horse. It was on a TV/radio series that I am too young to remember, but it was the only Silver-related reference I could think of. Note the line xmlns:xx is a prefix you can use to refer to this namespace. You then use this prefix in the line x:name, which is similar in function to ASP.NET’s ID property. CHAPTER 14  SILVERLIGHT INTRODUCTION 334 Adding Content Content can be added either declaratively or programmatically. If you wanted to create the previous example programmatically, you could do so in MainPage.xaml.cs in the constructor as follows: TextBlock TextBlock = new TextBlock(); TextBlock.Text = "Hi yo Silver"; LayoutRoot.Children.Add(TextBlock); Note that the TextBlock control is added as a child element to the LayoutRoot control. Elements in a XAML page are maintained in a hierarchy like HTML’s document object model (DOM). The Children property is similar to ASP.NET’s Controls property. This hierarchy allows you to do some strange things such as nesting text boxes inside buttons that wouldn’t be possible with Windows forms. I can’t wait to see some of the appalling uses this feature will no doubt be used for. Let’s create an example to demonstrate this now: <Button Width="200" Height="100"> <TextBox Width="150" Height="20"></TextBox> </Button> Figure 14-5. Text box inside a button Adding Silverlight to your Application So back to the Hi yo Silver application. How did this end up being rendered in the browser? In Silverlight 3.0, applications are displayed using the object tag. Previous versions of Silverlight utilized an ASP.NET Silverlight tag that has since been depreciated (although still available on Codeplex). Object Tag Select the Chapter14.HelloSilverlight.Web project and open the file ~/Chapter14. HelloSilverlightTestPage.html. The page will contain an object tag similar to the following: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/Chapter14.HelloSilverlight.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40818.0" /> <param name="autoUpgrade" value="true" /> CHAPTER 14  SILVERLIGHT INTRODUCTION 335 <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object> Note the following from the preceding code: • An object tag is used to embed the Silverlight plug-in in the web page. • The object tag has a param value that references the JavaScript function onSilverlightError() to return any errors from Silverlight to the user via JavaScript. When you compile your Silverlight application, all the XAML, resources, references, and so forth get compressed into an XAML Application Package (XAP) file. The object tag has a property called Source that contains the location of the XAP file. Also note that the test page contains the following line: <script type="text/javascript" src="Silverlight.js"></script> Silverlight.js contains lots of functionality such as error handling, loading, and displaying the plug-in; routing messages to JavaScript; and upgrading the plug-in. If you want to customize how the Silverlight application is displayed, you can modify the parameters passed into Silverlight.js (or even Silverlight.js itself). Pages in Silverlight Silverlight allows you to divide your application up into a number of XAML pages. However, you cannot just move between pages as you do in ASP.NET with functions such as Response.Redirect or Server.Transfer. A popular way of implementing navigation between pages is to create one page with a container control that you then load other XAML files into.  TIP Silverlight 3.0 introduced an easier way (NavigationApplication) that you will examine in Chapter 15. You will create this paging functionality now because it will make it easy to navigate through the examples: 1. Right-click Chapter14.HelloSilverlight solution. 2. Select Add Class. 3. Call the class PageNavigator. 4. Enter the following code: using System; using System.Net; using System.Windows; using System.Windows.Controls; CHAPTER 14  SILVERLIGHT INTRODUCTION 336 using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace Chapter14.HelloSilverlight { public class PageNavigator { private static Grid RootLayoutElement; static PageNavigator() { RootLayoutElement = Application.Current.RootVisual as Grid; } public static void LoadPage(UserControl NewControl) { //Get reference to old control var OldUserControl = RootLayoutElement.Children[0] as UserControl; //Add new control RootLayoutElement.Children.Add(NewControl); //Remove old control RootLayoutElement.Children.Remove(OldUserControl); } } } Creating a Silverlight User Control You will now create a menu page with a number of buttons to take you to the examples you will create: 1. Right-click the Chapter14.HelloSilverlight solution and select Add➤New Item. 2. Select Silverlight User Control. 3. Enter the name MainMenu. 4. Note that at the top of the XAML code is a control declaration: <UserControl x:Class="Chapter14.HelloSilverlight.MainMenu" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> [...]... Width="150" Height="50" Content="Pause"> 5 Open ~/Media/MediaPlayerTest.xaml.cs and replace the existing code with the following: public partial class MediaPlayerTest : UserControl { public MediaPlayerTest() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MediaTest_Loaded); } void MediaTest_Loaded(object sender, RoutedEventArgs e) { this.cmdPlay.Click += new RoutedEventHandler(cmdPlay_Click);... 14 9 SILVERLIGHT INTRODUCTION Add an event handler for the click of the Media button in MediaTest_Loaded: this.cmdMediaTest.Click += new RoutedEventHandler(cmdMediaTest_Click); 10 Add the event handler code: void cmdMediaTest_Click(object sender, RoutedEventArgs e) { PageNavigator.LoadPage(new Media.MediaPlayerTest()); } 11 Press F5 to run your application and click the Media button You should see the... System.ComponentModel.PropertyChangedEventArgs(PropertyName)); } } } 7 Change the DataBindingTest class code to the following: public partial class DataBindingTest : UserControl { public List MoviesList = new List(); public DataBindingTest() { InitializeComponent(); this.Loaded += new RoutedEventHandler(DataBindingTest_Loaded); } void DataBindingTest_Loaded(object sender, RoutedEventArgs e) { //Create items for... demonstrate two-way data binding 1 Open DataBindingTest.xaml 2 Add the following XAML after the cmdChangeTitle button (note that the binding mode is set to TwoWay now): Two way binding: 3 Open DataBindingTest.xaml.cs In DataBindingTest_Loaded()()add the following code (after the... will now bind a ListBox: 1 Open DataBindingTest.xaml and add the following XAML (note the use of the DisplayMemberPath property, which tells it which item to bind to; in this case Title): List of items: 2 Open DataBindingTest.xaml.cs In DataBindingTest_Loaded() after the call to PopulateItems(),... folder called DataBinding to the example project 2 Right-click and Add➤New Item➤Silverlight UserControl Call it DataBindingTest 3 In the XAML, you need to add a namespace reference to the assemblies you're going to use Add the following line in the UserControl tag of DataBindingTest.xaml: xmlns:Data="clrnamespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 4 Between the layout root... 355 CHAPTER 14 5 SILVERLIGHT INTRODUCTION Open ~/DataBinding/DataBindingTest.xaml.cs and add the following using directive: using System.Windows.Data; 6 You need something to bind the controls to You will create a class called Movie that will have two properties: Title and Length Add the Movie class to the DataBindingTest.xaml.cs code: public class Movie : System.ComponentModel.INotifyPropertyChanged... string The following code shows you how to iterate through all the query string values: //URL Params foreach (String key in System.Windows.Browser.HtmlPage.Document.QueryString.Keys) { string KeyName = key; string strValue=System.Windows.Browser.HtmlPage.Document.QueryString[key]; } Embedding Content in a Silverlight application If you want to utilize content such as images within your Silverlight application,... MainMenu to the data binding test page Open ~/MainMenu.xaml.cs 9 Add the following code to the MainMenu_Loaded() method in MainMenu.xaml.cs: this.cmdDataBind.Click += new RoutedEventHandler(cmdDataBind_Click); 10 Add a method to the click event of the data bind button: void cmdDataBind_Click(object sender, RoutedEventArgs e) { PageNavigator.LoadPage(new DataBinding.DataBindingTest()); } 11 Press F5 to... Let’s create an example to demonstrate this 1 Open ~/DataBinding/DataBindingTest.xaml 2 Add the following XAML after the TextBox that has the x:name set to txtDeclaration: Change an object in list: 3 Open DataBindingTest.xaml.cs and add a click event handler: this.cmdChangeTitle.Click+=new . as Rich Internet Applications (or RIA to its friends). Silverlight offers the following: • Ability to use the .NET development tools you know and love • Utilize many of the .NET framework. part of .NET framework version 3.0, Microsoft released Windows Presentation Foundation (WPF): a new way of creating UIs for applications. Silverlight uses a subset of the full WPF and .NET framework Studio and .NET 3.5sp1 • Visual Studio 2010 Expression Blend The design time support for WPF and Silverlight applications is greatly improved in Visual Studio 2010 (see Chapter 17) , but for