Development Model

Now that you have a sense of Silverlight XAML, we can look at how using that XAML in a browser actually works. Unlike WPF, with standard Silverlight applications, JavaScript in the browser is the language in which you will add programmatic logic to your XAML.

Hosting Silverlight in HTML

To show and interact with XAML in the browser, Silverlight loads a plug-in into the HTML document. An OBJECT tag is used in Internet Explorer and an EMBED tag in Firefox (both on Windows and Mac OS X). You can specify this tag manually as seen in this code example:

<!-- Only works in IE6+ -->
<OBJECT
  id="WpfeControl"
  width="400"
  height="100"
  classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA"
  <param name="BackgroundColor" value="#ffebcd" />
  <param name="SourceElement" value=null />
  <param name="Source" value="HelloWorld.xaml" />
  <param name="WindowlessMode" value="true" />
  <param name="MaxFrameRate" value="30" />
  <param name="OnError" value="myErrorHandler" />
</OBJECT>

While this works perfectly well for Internet Explorer, you want your XAML to work in every supported browser equally well. To address this, the Silverlight team has supplied a script called AGHost.js that is used to host the XAML across all supported browsers, thereby eliminating the need for you to use an OBJECT tag, an EMBED tag, or something dynamically generated according to server-side browser detection.

Note

While the current version of the WPF/E SDK includes the AGHost.js script, it would not be a surprise to see ...

Get Getting Started with Silverlight now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.