Filter
Top Products
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.