document.getElementById('SilverlightPluginHost');
// creates the Silverlight plug-in.
createSilverlightPlugin();
</script>
</body>
</html>
This HTML file is the page that will host the Silverlight plug-in. Notice that it references two JavaScript files:
□ Silverlight.js
□ MySilverlight.js
You've already added the first one. Now, using Notepad, create the following JavaScript file; name it MySilverlight.js, and save it in C:Silverlight.
function createSilverlightPlugin() {
Silverlight.createObject(
'UI.xaml', // Source property value.
parentElement, // DOM reference to hosting DIV tag.
'mySilverlightPlugin', // Unique plug-in ID value.
{ // Per-instance properties.
width:'300', // Width of rectangular region of
// plug-in area in pixels.
height:'300', // Height of rectangular region of
// plug-in area in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of plug-in.
isWindowless:'false', // Determines whether to display
// plug-in in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'1.0' // Silverlight version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler
// function name.
}
This JavaScript file contains the logic behind your Silverlight application. It loads the Silverlight plug- in as well as the XAML file (UI.xaml, which is defined in the next section).
Double-click on Default.html now to load it in Internet Explorer. You will see the message shown in Figure 19-2 if your web browser does not have the Silverlight plug-in installed.
Figure 19-2
To install the Silverlight plug-in, click on the Get Microsoft Silverlight logo and follow the onscreen instructions. Once the plug-in is installed, refresh the page and you should see a gray box (there is nothing displayed yet, thus just a gray box). Right-click on the gray box and select Silverlight Configuration to verify the version of the plug-in installed (see Figure 19-3).
Figure 19-3
Understanding XAML
In this section, you see how to create the user interface of a Silverlight application using the Extensible Application Markup Language (XAML).
Using Notepad, create the following XAML file; name it UI.xaml and save it in C: Silverlight.
<Canvas
xmlns='http://schemas.microsoft.com/client/2007'
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
<Ellipse
Height='200' Width='200'
Stroke='Black'
StrokeThickness='10'
Fill='Yellow'/>
<Rectangle
Canvas.Left='80'
Canvas.Top='80'
Height='200'
Width='200'
Stroke='Black'
StrokeThickness='10'
Fill='LightBlue'/>
</Canvas>
Double-click on Default.html now to load it in the web browser. Figure 19-4 shows the output.
Figure 19-4
This XAML file contains two elements, <Ellipse> and <Rectangle>, which display an ellipse and a rectangle, respectively, on the page. Both elements are embedded within a Canvas control.
The Canvas control (every Silverlight application has at least one Canvas control) is designed to contain and position other controls and elements.
To define the positioning of controls within the Canvas control, you use the Canvas.Left and Canvas.Top attributes. The z order of objects embedded within a Canvas object is determined by the sequence in which they are declared. As the previous section shows, the <Rectangle> element is defined after the <Ellipse> element, and hence it overlaps the <Ellipse> element. However, you can override this default ordering by specifying the ZIndex attribute, as the following example shows.
Edit the UI.xaml file created in the previous section, and add the Canvas.ZIndex attribute for both the <Ellipse> and <Rectangle> elements:
<Canvas
xmlns='http://schemas.microsoft.com/client/2007'
