Windows Phone 7 Development : Media - Adding Sounds to an Application

Figure 1 shows the UI of the demo application. When you press the Play button, the robot flies diagonally toward the bottom right-hand corner of the screen. When it reaches an edge, the robot will bounce several times while making a "swoosh sound" to give the animation that dash of realism it needs to satisfy gamers.

Figure 1. Robot sound demo

You will build the RobotSoundDemo in three steps. You will start by creating a Windows Phone project. Next you will build the UI, and then you will add the code to handle control events.

1. Creating the RobotSoundDemo Project

To create the Video Demo project, follow the steps you have used in previous examples in this book.

• Open Microsoft Visual Studio 2010 Express for Windows Phone on your workstation.

• Create a new Windows Phone Application by selecting File => New Project on the Visual Studio command menu. Select the Windows Phone Application template, name the application "RobotSoundDemo," and click OK.

2. Building the User Interface

Before you can build the user interface, you need to add three files to the project you created in the previous steps:

• Robot.xaml

• Robot.xaml.cs

• sound18.wma

Once you successfully add those files to the project, you should observe the following list of files in the Solution Explorer window, as shown in Figure 2.

Figure 2. RobotSoundDemo project after adding the assets

2.1. Selecting the UI Resources

Here you will be adding the namespace of the robot asset you just added to the project using xmlns:uc="clr-namespace:RobotSoundDemo". This namespace will allow you to add the robot user control using the XAML code that looks like <uc:Robot x:Name="ucRobot" ...>.

<phone:PhoneApplicationPage
    x:Class="RobotSoundDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

					  

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:uc="clr-namespace:RobotSoundDemo"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">

2.2. Adding Robot Animation to the Main Page Resource Section

You will be adding to the Main page resource section the robot storyboard animation of moving from top left corner to bottom right. Notice in this robot animation the bouncing EasingFunction is added to the robot's movement, which will cause the robot to bounce toward the end of the movement.

<phone:PhoneApplicationPage.Resources>
                <Storyboard x:Name="MoveRobot">
                        <DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="ucRobot">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="244">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                                <BounceEase EasingMode="EaseOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="ucRobot">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="421">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                                <BounceEase EasingMode="EaseOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                </Storyboard>
        </phone:PhoneApplicationPage.Resources>

					  

2.3. Building the Main Page and Adding Components

This demo has a very simple UI that contains a Play button to animate the robot, and a MediaElement to play the sound effect. Notice here that MediaElement.Source is set to sound18.wma, whereas in a previous demo you set the source to the URL. This is because sound18.wma is a type of Content. You can verify this by right-clicking the sound18.wma file found in Solution Explorer to observe its properties, as shown in Figure 3.

Figure 3. Sound18.wma file is a type of Content

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

            <TextBlock x:Name="PageTitle" Text="RobotSoundDemo" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="56" />
        </StackPanel>

        <Grid x:Name="ContentGrid" Grid.Row="1">
            <uc:Robot x:Name="ucRobot" Margin="24,27,264,442" RenderTransformOrigin="0.5,0.5" >
                <uc:Robot.RenderTransform>
                        <CompositeTransform/>
                </uc:Robot.RenderTransform>
            </uc:Robot>
            <Button Content="Play" Height="72" HorizontalAlignment="Left"
                    Margin="6,333,0,0" Name="btnPlay"
                    VerticalAlignment="Top" Width="160"
                    Click="btnPlay_Click" />
            <MediaElement x:Name="robotSound" Height="100"
                          VerticalAlignment="Bottom" Margin="176,0,204,69"
                          Source="sound18.wma" AutoPlay="False"/>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

					  

Once you've loaded the XAML code, you should see the layout shown in Figure 4. Now it's time to wire up the events to animate the robot and play the sound effect in the next section.

Figure 4. RobotSoundDemo in design view

3. Coding the Application

In Solution Explorer, open MainPage.xaml.cs and replace the code there with the following code C# code blocks.

3.1. Specifying the Namespaces

There are no special namespaces that you are defining here.

using System.Windows;
using Microsoft.Phone.Controls;

namespace RobotSoundDemo
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

3.2. Adding an Event to Handle Play Button Click

When the Play button is clicked, the MoveRobot animation will be played, and, at the same time, the sound effect of the robot moving will also be played.

private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            MoveRobot.Begin();

            robotSound.Stop();
            robotSound.Play();
        }
    }
}

3.3. Testing the Finished Application

To test the finished application, press F5. The result should resemble the screenshot shown in Figure 1. Test your work by clicking the play button, which should cause the robot to fly to the bottom right-hand corner of the screen, making a "swoosh" sound as it goes. When the robot reaches the bottom, watch for it to bounce several times.