Step Two: Add XAML Mouse Events
The bulk of the work is done. Now things get really interesting. The next few steps will be taken in pieces, each building on the last, so you can make sure everything's working before you get too far along. In this step, you'll add some mouse events to the XAML code from Listing 1.

Silverlight supports several events that you can raise in your XAML and handle via code, in this case JavaScript. For this demo, you'll play with one mouse event in particular: MouseLeftButtonUp, though it'd be good to review the others, such as MouseMove, MouseEnter, etc. These are described in more detail in "Silverlight Mouse Support."

Go back to the control panel XAML code in Listing 1. At the end of each ellipse tag, add the following:

MouseLeftButtonUp="dropDots"

In your createSilverlight.js file, add a new function:

function dropDots(sender, mouseEventArgs)
{
alert('dots dropped!');
}

Reload the page. Now, when you click on one of the colored dots, you should see a popup.

Next, get a little fancier. Replace the alert statement you just wrote with the following:

sender.fill = "red";

This is just a quick demo to show how easy it is to interact with XAML. Reload the page and you should be able to turn each dot red by clicking on it. The "Scripting and Mouse Events" QuickStart on the Silverlight site walks you through a lot more of this type of thing.

Now replace the sender.fill assignment with a new statement:

alert(sender.Fill.Color); 

This returns the fill color of the circle as a Long value. That's good enough for now.

Step Three: Add PHP as XAML Source
So where does PHP come into play? As mentioned earlier, you can use it as the source for a Silverlight object. In fact, for now, just to get a working example up and running, use the same XAML source as the control panel you've already created.

Save the code in Listing 4 to "drawDots.php".

Listing 4: drawDots.php

<?
header('Content-type: text/xml');
?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="controlPanel_design">
<Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0" 

Canvas.Top="0">
<Ellipse x:Name="Ellipse" Width="71" Height="71" Canvas.Left="99.5133" 

Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" 

Stroke="#FF000000" Fill="#FFFF0000"/>
<Ellipse x:Name="Ellipse_0" Width="71" Height="71" 

Canvas.Left="192.86" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" 

StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFF00"/>
<Ellipse x:Name="Ellipse_1" Width="71" Height="71" 

Canvas.Left="286.207" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" 

StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF00C800"/>
<Ellipse x:Name="Ellipse_2" Width="71" Height="71" 

Canvas.Left="379.553" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" 

StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF230FD2"/>
<Ellipse x:Name="Ellipse_3" Width="71" Height="71" 

Canvas.Left="472.9" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" 

StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC80FA0"/>
</Canvas>
</Canvas>

Next, add a new function to createSilverlight.js:

function createDisplayCanvas()
{
Silverlight.createObjectEx({
source: "drawDots.php",
parentElement: document.getElementById("dotDisplayCanvas"),
id: "slDisplayCanvas",
properties: {
width: "100%",
height: "100%",
inplaceInstallPrompt:true,
version: "1.0"
}
});
}

Figure 3. PHP as XAML Source

Last, in PHPDemo.htm, replace

<div id="dotDisplayCanvas" class="XAMLCanvas">
</div>

Load the page and you should see a double row of colored dots, as in Figure 3. with

<div id="dotDisplayCanvas" class="XAMLCanvas">
<script type="text/javascript">
createDisplayCanvas();
</script>
</div>

Not particularly inventive, but it gets the point across.