Programming WPF, 2nd Edition

Development Model

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

Hosting 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 (on both Windows and Mac OS X). You can specify this tag manually, as shown 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>

Although 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 Silverlight.js that is used to host the XAML across all supported browsers, eliminating the need for you to use an OBJECT tag, an EMBED tag, or something dynamically generated according to server-side browser detection.^[133] To take advantage of this script, you import it and use the Sys.Silverlight class to load your XAML:

<!-- Loading the script locally -->
<script ...