So recently Kyle Funk (a fellow Imaginet-eer) and I started a little side project to build apps for the Windows Store. Kyle wanted to brush up on some client side coding and I wanted to try out the Windows Store apps compared to my previous Windows Phone experience.
One of the apps that Kyle wrote is called the Animal Sounds Game. Its interface consists of buttons with pictures of animals and when you press the button it plays the sound. Simple I know, but it was a great Windows Store launching point for us.
I asked Kyle to write down some steps to create an app like this and any tips that he would like to share.
The following is written by Kyle Funk, a fellow Software Developer at Imaginet
Animal Sound Board – Windows Store C# app development and using the MediaElement control Asynchronously
– To start off, create a new Windows Store Blank App. As common practice, it’s good idea to replace the current MainPage with a new “BasicPage”. Delete the MainPage currently in your project. Once it’s deleted, set up a new BasicPage with the name “MainPage’. You will receive a Dialog Box to alter/add files that you need to accept. The Basic page acts as a good template to start your project. Including Preconfigured binding and a header inside of a grid ready for you to start adding controls. Microsoft also recommends these steps in their Store App tutorials.
The UI for this application is very basic. Just a few buttons with Images in the content of the button. You can create it yourself in Visual Studio or use Expression Blend to assist in the design and photo resources.
I decided to use the MediaElement for our audio files. To see supported formats, click here – http://msdn.microsoft.com/en-us/library/cc189080(v=vs.95).aspx
– Once you find the Images and Audio you want to use, save them in your Assets folder.
Now let’s configure the URI’s in the fields we set up for each audio file. Make sure to prefix this protocol “ms-appx:///” to the URI. This allows us to access files within our app (Assets folder in this example). Notice the Third Backslash.
– Create 2 fields for each Audio you want to play. One will contain the Uri and the other will just be a “MediaElement” dedicated for that sound. You can only have 1 source set to a MediaElement.
We will set the audio source using the “MediaElement.SetSource” method which takes in RAS (Random access stream) and the MIME (Multipurpose Internet Mail Extensions) Type of the file. I will show you how to set up the Stream and retrieve the MIME type from the file loaded.
– Create a method (I named it SetAudio) and add the modifier “async”. We also need to add a parameter of type “Uri” (I named it audioUri). The methods used to set up the stream and access the StorageFile Class for retrieving the audio file can only be run by using the “await” operator.
– Set the return type as Task<MediaElement>. We must add Task<> to the Method declaration because our async method returns a value.
– First let’s load the Audio file using the “StorageFile.GetFileFromApplicationUriasync” and give it the audioUri parameter we passed into the “SetAudio” method. Remember to use the “await” operator in order to access this class.
– Next let’s set up the stream using the file we set up and passing in the AccessMode as Read. “File.OpenAsync(FileAccessMode.Read)”. This also requires the “await” operator.
– Now let’s new up the MediaElement that we will eventually return. In the example below, you’ll notice I have the “AutoPlay” property being set but commented out. This is handy when setting the source of the media element. In some cases, we don’t want the media to play automatically once the source is set. By default its “True”. We will leave it true since the first time the audio is loaded, we want it to play anyways. We won’t load it again after the first time and it will just call “Play” to initiate the sound afterwards.
– By using the “MediaElement.SetSource” method, pass in the Stream and the Content type of the file we loaded. This is simply done by the “ContentType” string property of the File you loaded. EX…LoadedFile.ContentType. See below.
– Now we return the MediaElement. Here is how the final method should look.
– At this point, we put some basic code into the click events of the button clicks. We check if the MediaElement Field we set up for this Button is null. If it is, we set the corresponding Field to our SetAudio method using the await operator and passing in the proper Uri field we set up. In case you forgot, remember to add the “async”modifier to the events. Repeat for every sound you want to play.
Optionally, you could load all the MediaElements on Initialize by setting each field and using the AutoPlay property I mentioned earlier to disable playing them all at once. Then you would just need to call “MediaElement.Play()” in the events.
And that is it. Now that you have an app (hopefully a bit different than this one) you can submit it to the windows store. As of today (Feb 15th) this application has been downloaded over 1,000 times! There is a huge market people that want good Windows Store apps, or even just fun ones like this.
If you have any questions about the app please post a comment.
Thanks for reading!