Building a simple game using XAML/C# Part 2 – Input and Multimedia

Starting from the last post in this brief series on XAML UI for Metro style apps, we’re ready to enable user input. Before doing this, I wanted to add a few sounds to the application. To do this, I used the MediaElement and embedded a few sounds into the XAML. First, I added all of the sounds that I am using to a media folder in the solution by right clicking on the solution, selecting add new folder, then (right click on the folder) add existing item. You can download the Metro Simon source sounds (created in FruityLoops using just some generic chords) if you’re following along. The following XAML shows how the sounds were embedded below the canvas element:

MainPage.xaml:
----------------------
</canvas>
<MediaElement x:Name="blueSound" Source="Media/blue.mp3" AutoPlay="False"/>
<MediaElement x:Name="greenSound" Source="Media/green.mp3" AutoPlay="False"/>
<MediaElement x:Name="redSound" Source="Media/red.mp3" AutoPlay="False"/>
<MediaElement x:Name="yellowSound" Source="Media/yellow.mp3" AutoPlay="False"/>

Now the sounds can be triggered by just calling .play. Next, we’ll be adding a trigger loop for each of the squares that will turn on a color and make a sounds then turn off the color. The following code shows this for yellow:

MainPage.xaml.cs:
----------------------
// trigger sound + color
public void triggerOnYellow()
{
  yellowRect.Fill = new SolidColorBrush(Colors.Orange);
  yellowSound.Play();
}
public void triggerOffYellow()
{
  yellowRect.Fill = yellowBrush;
}
</code></pre>
We’ll also be adding click / unclick handlers for the methods that will invoke the trigger methods:
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee; font-size: 12px; border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100%;"><code>
MainPage.xaml.cs:
// Click / unclick
void yellowRect_PointerReleased(object sender, Windows.UI.Xaml.Input.PointerEventArgs e)
{
  triggerOffYellow();
}

void yellowRect_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerEventArgs e)
{
  triggerOnYellow();
}

Finally, we’ll be adding the click handlers directly to the yellow button (rectangle) which will then connect the shapes to the methods. For example:

MainPage.xaml.cs:
----------------------
yellowRect.PointerPressed += new Windows.UI.Xaml.Input.PointerEventHandler(yellowRect_PointerPressed);
yellowRect.PointerReleased += new Windows.UI.Xaml.Input.PointerEventHandler(yellowRect_PointerReleased);
yellowRect.PointerEntered += new Windows.UI.Xaml.Input.PointerEventHandler(genericPointerEntered);
yellowRect.PointerExited += new Windows.UI.Xaml.Input.PointerEventHandler(genericPointerExited);

Building and running the application at this point will create a screen similar to the previous screen except clicking on the buttons will now trigger sounds and change the button colors. Note that you /might/ have issues with sound playback in the simulator. To get the sounds working, I changed my debugger to debug locally as opposed to in the simulator. The following screenshot shows the game running with the green square triggered.

screenshot showing the game with a lit green square
You can download the sample up to this point from here.

This is a follow up to Part 1 – XAML UI.