I basically learned how to do this from Laurence Moroney's excellent book "Introducing Microsoft Silverlight 1.0". You should buy it. I'm deliberately leaving out some key info from this walkthrough so it doesn't hurt his book royalties. Also, I can't remember some of them.
First up I drew this little man holding the video screen using Expression Design. You can tell I spent years at Art College right? Also, this guy has high blood pressure and needs to reduce his salt intake.
Next, I exported the image as a XAML file.
After that, I opened up the Expression Blend 2.0 Preview and created a new Silverlight Application (JavaScript). After a bit of resizing of my canvas, I copied and pasted in the XAML from the image into the XAML of the Page.xaml file that I'd been given by Expression Blend.
I then grouped (Object -> Group Into -> Canvas) the various controls (the triangle, square and two rectangles) into individual canvases which then became my buttons. These can be assigned handlers that detect stuff like mouse clicks.
I then added a Media Element which fit nicely into the screen being held by the little guy's hand and inclined them both slightly.
I then did a little bit of hand coding on the XAML of this page to wire up the event handlers for each of the three buttons along the lines of:
<Canvas x:Name="btnPlay" Width="30.333" Height="34.252" Canvas.Left="301.687" Canvas.Top="242.001" MouseLeftButtonDown="handlePlay">
I then edited the Default_html.js file in Visual Studio adding in the actual handling code, so 3 functions that look like:
function handlePlay(sender, eventArgs)
{
sender.findName("vid").play();
}
Gratuitous unhelpful screenshot of Visual Studio 2008 Beta 2 Pro:
Incidentally "vid" is the name I'd assigned to my Media Element in Blend. This allows me to use the Silverlight DOM API to reference it and call methods on it such as play(), stop(), pause().
At this point, the little app works. My next challenge was to figure out how to embed it in this page - coming in the next part.
