Adding "Press Play" to a Silverlight Media Player

I just added an animated "Press Play" graphic to the Silverlight Media Player created with Expression Encoder.  I created the graphic (with animation) as a separate XAML file so it can be easily reused.  To see it in action, see this blog post.  Feel free to use the PressPlay.xaml in your Silverlight media players; just link back to my blog.

Here's how to use it with a Silverlight media player created with Expression Encoder:

1. Add a Loaded="PlayerLoaded" event handler to the root canvas
2. Edit the StartPlayer.js file and change the autoPlay value to false. (search for "autoPlay")
3. Name one of the Canvas elements in player.xaml "Scene"
4. Add the attached PressPlay.xaml to the project files.
5. Add this code to player.js:

function PlayerLoaded(sender, eventArgs)
{
var downloader = sender.getHost().createObject("Downloader");
downloader.addEventListener("Completed", PressPlayDownloaded);
downloader.Open("GET", "PressPlay.xaml");
downloader.send();
}

var m_pressPlay = null;

function PressPlayDownloaded(sender, eventArgs)
{
var host = sender.GetHost();

var xaml = sender.ResponseText;

var pressPlay = host.content.CreateFromXaml(xaml, true);

var scene = sender.findName("Scene");

pressPlay["Canvas.Left"] = scene.Width / 2 - pressPlay.Width / 2;
pressPlay["Canvas.Top"] = scene.Height / 2 - pressPlay.Height / 2;

pressPlay.IsHitTestVisible = false;

m_pressPlay = pressPlay;

scene.children.Add(pressPlay);

var media = sender.findName("VideoWindow");

media.addEventListener("CurrentStateChanged", MediaStateChanged);
}

function MediaStateChanged(sender, eventArgs)
{
if (sender.CurrentState == "Playing")
{
if (m_pressPlay)
{
m_pressPlay.GetParent().children.remove(m_pressPlay);

m_pressPlay = null;
}
}
}

PressPlay.xaml