Silverlight 2 Wee Mee

Sometimes it is fun to redo something you did a while back. I did a cool little application back in 1.1 days which I have decided to update to Silverlight 2.0. All it is an image with a couple of invisible buttons where the eyes are. If you click on the eyes it will play a media file.

Click on the eyes below to see it in action (switch on your speakers)

It's a fun little sample and it brings kind of interesting possibilities to Silverlight 2. This technique can be used to bring a rich image map type control to Web Pages. It can also be use to bring much richer UI's. Why not have a media player which is a photograph of your stereo?

The XAML

<Grid>
    <Canvas>
        <Image  x:Name="myImage"
                Source="/Assets/Images/WeeMee.JPG">
        </Image>
        <Button x:Name="leftEye"
           Canvas.Left="42" Canvas.Top="49"
           Height="12" Width="10"
           Cursor="Hand"
           Opacity="0"
           Click="leftEye_Click"/>
        <Button x:Name="rightEye"
           Canvas.Left="57" Canvas.Top="49"
           Height="12" Width="10"
           Cursor="Hand"
           Opacity="0"
           Click="rightEye_Click"/>
    </Canvas>

    <!-- Media 1-->
    <MediaElement x:Name="media1"
            AutoPlay="False"
            Source="/Assets/Audio/cutitout.wma">
    </MediaElement>

    <!-- Media 2-->
    <MediaElement x:Name="media2"
            AutoPlay="False"
            Source="/Assets/Audio/laugh.wma">
    </MediaElement>
</Grid>

The C#

private void leftEye_Click(object sender, RoutedEventArgs e)
{
    media1.Stop();
    media2.Stop();
    media1.Play();
}

private void rightEye_Click(object sender, RoutedEventArgs e)
{
    media1.Stop();
    media2.Stop();
    media2.Play();
}