CHAPTER 14 SILVERLIGHT INTRODUCTION 351 Passing Parameters into Silverlight There are a number of different methods for passing parameters into Silverlight: • Query string • InitParams property • JavaScript function calls (as explained previously) InitParams The easiest way to pass parameters into a Silverlight application is with the InitParams property on the Silverlight control. Values passed in using this method need to be represented in the format Name=Value and separated by commas. For example: Name=Alex,Age=28,Country=Australia To use the IntitParams property, just add params to the object tag like so: <param name="InitParams" value="name=alex,sex=male" /> Input values can then be retrieved by iterating through the InitParams keys collection in App.xaml.cs: //Initialization parameters. foreach (String key in e.InitParams.Keys) { string strKey = key; string strValue=e.InitParams[key]; } Query String Another method of passing paramaters to a Silverlight is with the query 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, you have a number of options, two of which are shown here: • Relative rath + resource: <Image Source="myImage.jpg"></Image> CHAPTER 14 SILVERLIGHT INTRODUCTION 352 • Full URL: <Image Source="http://www.mysite.com/myImage.jpg"></Image> NOTE Silverlight currently displays only JPG or PNG images. This means that GIF images do not display. The Silverlight team apparently left this out to reduce the size of the plug-in (not to mention GIF becoming a paid standard), but it does seem to be a weird omission. On a related note, if you are interested in manipulating images, you might be interested in checking out http://www.codeplex.com/imagetools. The steps to include an image in your project are as follows: 1. Add the image to the Silverlight project. 2. Select properties of the image. 3. Change the Build action to Resource. Figure 14-10. Bundlling an image file in a Silverlight Project 4. You can then reference the image as follows: <Image Source="myImage.jpg"></Image> Loading XAML Dynamically Silverlight allows you to load XAML at runtime. You might want to do this to reduce your application size, spread out loading through your application's lifetime or dynamically load content. When you have retrieved your XAML content as a string, you need to pass it into the XamlReader.Load() method. All that is then necessary to do is cast the results of XamlReader.Load() to the type of object the XAML represents. When constructing the XAML, be sure to add the xmlns namespace property to your objects; otherwise, Silverlight will be unable to determine the type of object you are trying to create. Following is CHAPTER 14 SILVERLIGHT INTRODUCTION 353 a simple example illustrating loading a TextBlock from a string that would be placed in the code behind of a XAML file (and assumes an element called LayoutRoot exists): string XAMLContent=@"<TextBlock xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/ presentation"" Canvas.Left=""200"" Canvas.Top=""100"" Text=""Hello""></TextBlock>"; TextBlock TextBlock=(TextBlock) System.Windows.Markup.XamlReader.Load(XAMLContent); LayoutRoot.Children.Add(TextBlock); TIP Unless you are creating just one XAML object, you probably want to load your XAML within a layout control such as Canvas. You can then easily cast the result of the Load() method to a Canvas object. Media One of Silverlight’s biggest strengths is its media functionality. Silverlight has been used to stream media content on a number of high-profile sites such as the 2008 Beijing Olympics on NBC, Blockbuster Video, Netflix, and UK TV channel ITV. Silverlight supports these formats: • Windows Media audio and video • MP3 audio • AAC • AVC • H.264/MPEG • HD formats (introduced in Silverlight 3.0) Silverlight also supports a great feature called adaptive streaming that varies the quality (bit rate) of the media stream depending on the user’s available bandwidth to obtain the best experience possible. It’s very easy to add video functionality to your application, so let’s create a simple video player: 1. Create a new folder called Media in your project. 2. Right-click and select Add➤New Item. 3. Select Silverlight User Control and call it MediaPlayerTest. 4. Add the following XAML within the Grid tags: <Canvas Width="800" Height="600" Background="White"> <MediaElement x:Name="MediaPlayer" Width="400" Height="300" Source="/Robotica_720.wmv"></MediaElement> <Button x:Name="cmdPlay" Canvas.Left="50" Canvas.Top="300" Width="150" Height="50" Content="Play"></Button> CHAPTER 14 SILVERLIGHT INTRODUCTION 354 <Button x:Name="cmdStop" Canvas.Left="250" Canvas.Top="300" Width="150" Height="50" Content="Stop"></Button> <Button x:Name="cmdPause" Canvas.Left="450" Canvas.Top="300" Width="150" Height="50" Content="Pause"></Button> </Canvas> 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); this.cmdStop.Click += new RoutedEventHandler(cmdStop_Click); this.cmdPause.Click += new RoutedEventHandler(cmdPause_Click); } void cmdPause_Click(object sender, RoutedEventArgs e) { MediaPlayer.Pause(); } void cmdStop_Click(object sender, RoutedEventArgs e) { MediaPlayer.Stop(); } void cmdPlay_Click(object sender, RoutedEventArgs e) { MediaPlayer.Play(); } } 6. If you don't have a WMV file on hand (you will need to update the Source property of the media element), download a test file from the following URL (remember to unzip it) and place it in the media directory you created in the solution: http://download.microsoft.com/download/4/1/b/41b10a4f-f4f4-4692-aa44- a458d0047e91/Robotica_720.exe 7. You now need to include this media file with the application or reference it. If you were developing a real-world application, you would want to reference it because it will make your Silverlight application smaller. In this example, to reduce the setup, just set the build action to Resource. 8. All that remains is to wire up the Media button on MainMenu to take you to the player page: open MainMenu.xaml. CHAPTER 14 SILVERLIGHT INTRODUCTION 355 9. 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 WMV file playing. You can click the buttons to pause/play and stop the media player. Silverlight contains rich media functionality allowing you to jump to specific points on the video, alter playback speed, and so on. TIP You can even use media files as a brush to fill in XAML elements. Additional Controls In addition to the standard Silverlight controls such as TextBox, Image, and ComboBox additional controls such as a DataGrid, Slider, and Calendar are available. The easiest way to use controls such as DataGrid is to drag them from the toolbar and have VS sort out the references for you. Data Binding There are few applications that do not have to work with data. Silverlight offers a rich binding model that makes it very easy to work with data. Let’s create a simple example to bind data to a text box: 1. Add a new 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="clr- namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 4. Between the layout root tag add the following: <StackPanel Orientation="Vertical"> <TextBlock>Bound programmatically:</TextBlock> <TextBox x:Name="txtBoundProgrammatically" Width="300" Height="20"></TextBox> <TextBlock>Bound declaratively:</TextBlock> <TextBox x:Name="txtDeclaration" Width="300" Text="{Binding Title, Mode=OneWay}" Height="20" ></TextBox> </StackPanel> . you created in the solution: http://download.microsoft.com/download /4/ 1/b /41 b10a4f-f4f4 -46 92-aa 44- a458d0 04 7 e91/Robotica_7 20. exe 7. You now need to include this media file with the application. Width=" ; 40 0" Height=" 300 " Source="/Robotica_7 20. wmv"></MediaElement> <Button x:Name="cmdPlay" Canvas.Left=" 50& quot; Canvas.Top=" 300 ". Canvas.Top=" 300 " Width="1 50& quot; Height=" 50& quot; Content="Stop"></Button> <Button x:Name="cmdPause" Canvas.Left=" ;45 0& quot; Canvas.Top=" 300 "