285 Chapter 10 Designing Silverlight Applications 286 Microsoft Visual Studio 2010: A Beginner’s Guide Key Skills & Concepts ● Start a New Silverlight Project ● Work with the Silverlight Designer ● Add Controls to an Application ● Play Silverlight Videos ● Deploy Silverlight Applications S ilverlight is a Web technology that allows you to add a rich user experience to Web applications. It uses XAML, just like WPF applications, but runs in a Web page supported by ASP.NET. Other parts of this book prepare you for working with Silverlight. Since Silverlight uses XAML, you can review Appendixes A and B to get up-to-speed on XAML essentials. Silverlight also has many features in common with WPF. Therefore, it would be useful to review Chapter 8 before reading this chapter. What you’ll learn in this chapter is how VS helps you create a Silverlight project, how to add controls to the Silverlight designer, and how to deploy Silverlight applications. Starting a Silverlight Project As when starting other projects, you can select File | New | Project or press CTRL-SHIFT-N; you then select a Silverlight application in the New Project window. After you set up the project with a name and folder, VS will display another window for configuring the Silverlight application, shown in Figure 10-1. Silverlight gives you the option to create a Web site at the same time as you create the Silverlight application. You can opt not to create the Web site, but ultimately, you’ll need to host your Silverlight application on a Web page. There is an alternate Web technology based on ASP.NET Web forms, but this book concentrates on the ASP.NET MVC Web development model, discussed in Chapter 9, which is why you see the New W eb project type set to ASP.NET MVC Web Project. Click OK to create the Silverlight application, shown in Figure 10-2. You’ll also see a screen asking if you want to create a unit test project, which is the same window discussed in Chapter 9. Click OK to continue. Chapter 10: Designing Silverlight Applications 287 Figure 10-1 Creating a new Silverlight application Figure 10-2 A new Silverlight project 288 Microsoft Visual Studio 2010: A Beginner’s Guide Similar to WPF applications, Silverlight applications start with a MainPage.xaml file and an App.xaml file, where App.xaml runs to initialize the application and MainPage .xaml contains the display page. The Web site is a typical ASP.NET MVC application, except that it does have a test page that hosts the Silverlight application, SilverlightDemo CSTestPage.aspx (SilverlightDemoVBTestPage.aspx for VB). There’s also a Silverlight DemoCSTestPage.html (SilverlightDemoVBTestPage.html for VB), which performs the same function as the SilverlightDemoCSTestPage.aspx (SilverlightDemoVBTestPage .aspx for VB) hosting Silverlight, except that the *.html version uses JavaScript and the HTML object tag to host Silverlight. Listing 10-1 shows the contents of the test page and how it hosts the Silverlight application. There is no C# or VB version of Listing 10-1 because the code is XAML, which works exactly the same with either language. Listing 10-1 Hosting a Silverlight application on a Web page <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>SilverlightDemoCS</title> <style type="text/css"> // css styles omitted </style> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript"> function onSilverlightError(sender, args) { // error handling code omitted } </script> </head> <body> <form id="form1" runat="server" style="height:100%"> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/SilverlightDemoCS.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> Chapter 10: Designing Silverlight Applications 289 <param name="minRuntimeVersion" value="3.0.40818.0" /> <param name="autoUpgrade" value="true" /> <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> <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"> </iframe> </div> </form> </body> </html> Listing 10-1 contains an object tag that hosts the Silverlight application. This object tag has various parameters, which are described in Table 10-1. You can run the application and view the Web page, but there isn’t much to see yet. The next section starts you in the direction of making something useful happen with Silverlight by reviewing the Designer. Table 10-1 Object Tag Parameters for Silverlight Parameter Description source In Figure 10-2, you can see a ClientBin folder in the ASP.NET MVC Web application project. When the Silverlight project builds, VS will take the output of that project and place it into the ClientBin folder. The output of a compiled Silverlight project is a *.xap file, which is the same as a compressed *.zip file, but with a different name. Silverlight loads the *.xap file into the browser at runtime and runs the application. onerror Listing 10-1 omitted the contents of the onSilverlightError JavaScript function, which is called whenever an error occurs in Silverlight. background Sets the control background. minRuntimeVersion States that the user must have v3.0.40818.0 or later of the Silverlight plug-in for this application to run. The user receives an error message if she doesn’t have the minimum version. autoUpgrade If the user doesn’t have the minimum version, as specified in minRuntimeVersion, setting this to true will prompt the user to begin the upgrade process. 290 Microsoft Visual Studio 2010: A Beginner’s Guide Navigating the Silverlight Designer The underlying technology for displaying the UI is XML Application Markup Language (XAML), pronounced “Zamel.” Appendix A contains an introduction to XML, and Appendix B contains an introduction to XAML if you need to obtain a basic understanding of these two technologies. It would really be helpful for you to review Chapter 8 because you’ll find many of the same controls for layout and display in both Silverlight and WPF . The Silverlight Designer is very similar to the WPF Designer in how you work with controls. Drag and drop from the Toolbox, configure Grids, interact with XAML, and set properties in exactly the same way with Silverlight as with WPF. Since there are so many similarities, I won’t repeat the material covered in Chapter 8 but will build upon previous material, showing you what is special about Silverlight. Using Silverlight Controls Silverlight has strong multimedia support through streaming audio and video. In fact, the Toolbox has controls that make it easy to host your own videos and control the user experience for playing videos. The following steps show how to design a screen that shows a video, as shown in Figure 10-3. 1. Your project starts out with a page named MainPage.xaml, which you should open so the designer is showing. If the XAML editor is showing, click on the Design tab at the bottom of the designer window. 2. You’ll have a default Grid, which you can work with in exactly the same way as the designer for WPF, discussed in Chapter 8. You need to ensure the Grid has two rows, with the top row being large enough to fit the MediaElement and the bottom large enough to fit a single button. Hover over the left margin of the window until you see a grid line appear on the window. Move the grid line vertically until you’ve created two rows, where the bottom row is large enough to hold a button, as shown in Figure 10-3. Click on the window margin when you have the grid line positioned where you want. 3. Find the MediaElement in the Toolbox and drag it onto the top row of the Window in the designer. If you find that you haven’t made the top row large enough, grab the grid line arrow in the left margin and drag it down some more. 4. Set the Name property of the MediaElement control to VideoPlayer. . 285 Chapter 10 Designing Silverlight Applications 286 Microsoft Visual Studio 2010: A Beginner’s Guide Key Skills & Concepts ● Start a New Silverlight Project ● Work. Creating a new Silverlight application Figure 10-2 A new Silverlight project 288 Microsoft Visual Studio 2010: A Beginner’s Guide Similar to WPF applications, Silverlight applications start with. setting this to true will prompt the user to begin the upgrade process. 290 Microsoft Visual Studio 2010: A Beginner’s Guide Navigating the Silverlight Designer The underlying technology for