Getting Started with Silverlight - Part 3/Page 2 | WebReference

Getting Started with Silverlight - Part 3/Page 2


Getting Started with Silverlight: Part 3

Adam Nathan

The Content Property

The most commonly used member on the Silverlight control is its Content property, which represents the XAML content hosted by the control and exposes some interesting functionality. It has the following subproperties:

  • ActualWidth and ActualHeight—Report the dimensions of the Silverlight control. You can discover the same information by using the HTML DOM, although these Silverlight properties give different values than the corresponding HTML properties when the browser zoom level (an Internet Explorer feature) is not 100%. These Silverlight properties always report the real dimensions, whereas the HTML properties report the virtual dimensions (in essence, hiding the zoom level).
  • Root—The instance of the root element in the current XAML content. This is the same object passed to onLoad as the rootElement parameter. (This property makes the rootElement parameter unnecessary because the handler can always use control.Content.Root instead.)
  • FullScreen—Enables the Silverlight content to fill the entire screen. To prevent hostile Silverlight applications from holding your screen hostage, full-screen mode must be initiated by a user action (such as a mouse click or key press). Therefore, this functionality is covered in Chapter 7, "Responding to Input Events."
  • Accessibility—Enables you to customize how the Silverlight control appears to accessibility software. The Accessibility object contains three settable properties: Title, Description, and ActionDescription (see Chapter 7 for more information).

Content exposes three functions explained in Chapter 2, "XAML," and Chapter 8, "Downloading Content on Demand":

  • CreateFromXaml—Dynamically creates Silverlight content specified in XAML in a JavaScript string.
  • CreateFromXamlDownloader—Dynamically creates Silverlight content specified in a XAML file downloaded on demand.
  • FindName—Finds the instance of a Silverlight object defined in XAML based on an assigned name.

Content even exposes two unique events that cannot be consumed any other way. For example, you cannot specify either of these in the events array passed to createObject and createObjectEx. These two events are

  • OnResize—Raised whenever the value of Content's ActualWidth or ActualHeight property changes
  • OnFullScreenChange—Raised whenever the value of Content's FullScreen property changes

A handler can be attached to either event by assigning a function reference. Listing 1.11 demonstrates this for the OnResize event.

LISTING 1.11 CreateSilverlight.js—Assigning an OnResize Handler

In this example, OnResize is set to a JavaScript closure (a function defined inside another function), which displays the control's dimensions according to Silverlight and according to the HTML DOM. If you try this with any of the examples in this chapter and change Internet Explorer's zoom level to 200%, you'll see that the HTML DOM still reports dimensions of 390x100 but Silverlight reports dimensions of 780x200. Although Internet Explorer doesn't want web pages to know when they are being zoomed (because they could do weird things that interfere with proper zooming), leveraging this information can be critical for Silverlight content because the visual elements inside the control do not get scaled automatically. Chapter 6, "Positioning and Transforming Elements," discusses the resizing of Silverlight content.

Other Members

In addition to the Settings and Content properties, the Silverlight control defines three more properties:

  • InitParams—Gives whatever string was set (if any) for the initParams parameter to createObject or createObjectEx (or directly on the OBJECT/EMBED element). Although InitParams is always exposed to JavaScript as a single string, a comma-delimited list will be split into an array of strings passed to .NET code in future versions of Silverlight.
  • IsLoaded—Reports whether the Silverlight content has been loaded.
  • Source—Gives the control's source URL or #id value. This property can also be set to a new URL or #id value. This causes the control to reload with the new content, and the onLoad event will be raised again.

The control also directly defines two functions:

  • CreateObject—Enables you to create an instance of the downloader object described in Chapter 8.
  • IsVersionSupported—Given an input string containing a version number such as 1.0, this function tells you whether the installed version of Silverlight is compatible with that version. Silverlight.js uses this internally to perform its version checking.

The control also defines a single event—OnError—that is the same as the onError event described earlier. By assigning a function reference to the control's OnError member, you can change the default error handler at any time. Note that the control does not have an OnLoad member. You can only assign a handler for the onLoad event using the approaches discussed earlier.


As time passes, more software is targeted for the Web, and more software is expected to deliver high-quality—sometimes cinematic—experiences. However, the effort involved in creating such user interfaces has been far too difficult in the past.

If you're a software developer, you might be skeptical about the need for "eye candy" beyond what HTML provides. But like it or not, having an engaging user experience matters, whether you are creating a public consumer-facing site, or a simple intranet application for your manager. You can blame the unrealistic software on movies and on TV, or you can blame real-world software that is starting to catch up to Hollywood's standards! Indeed, modern software has more visual polish than it used to. You can see it in traditional operating systems (such as Mac OS X and, more recently, Windows Vista), in software for devices such as TiVo or Xbox, and of course all over the Web thanks to Adobe Flash. Users have increasing expectations for the experience of using software, and companies are spending a great deal of time and money on user interfaces that differentiate themselves from the competition. Microsoft understands this, and it's apparent in its latest technologies—first on the desktop with WPF, and now on the Web with Silverlight.

Silverlight makes it easier than ever before to create engaging web-based user interfaces, whether you want to create a simple piece of content or an immersive interactive experience worthy of a role in a summer blockbuster! This chapter focused on the HTML and/or JavaScript required for getting any Silverlight content inside a web page, as well as the ways in which the embedding can be customized. The next chapter explores the XAML side of the story in depth, and then the remainder of the book covers all the different types of content and interactivity that can be achieved with Silverlight.

Digg This Add to

Printed with permission from Pearson Education from the book Silverlight 1.0 Unleashed written by Adam Nathan.