Microsoft 9GD00001 manual Navigating the Silverlight Designer, Using Silverlight Controls

290Microsoft 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.