Part 11: Setting up the SoundBoard App

Play Part 11: Setting up the SoundBoard App
Sign in to queue


Source Code:
PDF Version:

The PetSounds app was a nice way to learn about playing media, but we have commercial aspirations with our app. So, in this lesson we'll sit down and think about designing and developing a more robust version of PetSounds -- a sound board app with many different types of categories of sounds, and perhaps even the ability to record your own sounds.

So, our game plan in this lesson ...

  1. We'll sketch some ideas on the user interface and user's interaction with the app
  2. We'll set up the new app, creating a new project, copying assets into the project, setting up the AppResources.resx ... all things we learned about before, but tasks we now need to perform for our brand new project

1. Sketch out the screens in a low-tech mockup

As we set out to think through designing our first commercial app, I would recommend you take some time and read through this:

Windows Phone 8 Design Process

Also, there's also a template for sketching a "low tech mockup":

These templates are not only useful for getting your ideas down on paper, but also for thinking through the users interaction with the app, and what feedback we can show the user about the functionality of the app. I can also use a "low tech mockup" to communicate my design and interaction ideas to other to gather their feedback before I waste time developing the app -- just to realize I made a major flaw because I assumed too much.

So, I use that template to sketch my ideas for the SoundBoard app:

Generic Episode Image


The design was largely inspired by the Pivot App Project template ... there will be several PivotItems ("views" or "types") each containing a number of sound tiles. When you tap on a tile, it will play the sound.

I also want to be able to record a sound. I have a app bar at the bottom of the main page ... tapping that will allow you to record a sound. After thinking I needed three buttons, we had the idea that we could provide some visual feedback ... we can easily create a reel, like those old reel-to-reel players from the 1960's, and animate that while recording. That would offer some great visual feedback to the user. Clicking a save application bar button would then allow you to provide a name for the sound and it would be displayed in a PivotItem titled "mine" or "custom" or something like that.

Now, besides the design process, there's always some effort in getting the assets you need for a project like this. In this case, we're providing you with the sounds and the images to follow along. Truth be told, Clint spent a few hours working with a sound guy and a graphic artist. In my experience, the effort required to bring in creative types, or to build creative assets yourself, should not be underestimated. It can be challenging even in a simple app. If you have serious commercial aspirations, I would find someone well versed in those areas that you are not an expert. You can waste a lot of time trying to make your images and sounds just right, and still fall far short of something that can pass as professional quality. Whether it be websites or apps I've worked on, I've never regretted paying professional designers for their help. It's made me look more professional than I really am.

At any rate, with just a little planning up front and some time spent acquiring the assets I'll need, I have a good direction for my app. Let's go ahead and get started developing the app.


2. Create the SoundBoard project based on the Windows Phone Pivot App project template


File | New | Project ... menu opens the New Project dialog:

Generic Episode Image

Just like we did earlier in this lesson:

  1. Make sure you're in the Installed | Templates | Visual C# | Windows Phone section
  2. This time, choose the Windows Phone Pivot App project template
  3. Change name to SoundBoard
  4. Click OK


3. Replace project assets

In the Solution Explorer, open the Assets folder and delete all files and subfolders:


Generic Episode Image


... and confirm the deletions ...


Generic Episode Image


In the assets file that is available wherever you originally downloaded this document or watched the associated videos, there's a subfolder called: SoundBoard_Assets ... select all files and subfolders ...


Generic Episode Image


... and drag and drop into the SoundBoard project's Assets folder in the Solution Explorer:


Generic Episode Image


4. Confirm the project icons are properly referenced

In the Properties folder, open the WMAppManifest.xml file:


Generic Episode Image


... and confirm that the App Icon, Small Icon and Medium Icon are set properly ...


Generic Episode Image

Windows Phone 8 supports three Tile templates: flip, iconic, and cycle. This link does a nice job explaining the different types:

In this app, our needs are simple. Later on in this series, we'll use a Cycle template and see how to programmatically give it a list of images to cycle through. Personally? I love any type of data visualization so I love those apps that use the iconic template for anything that has a lot of updatable information that can be displayed in a tile. For example, on my own phone, I have a weather app that updates the tile with the temperature, humidity, wind and visibility, I have another app the displays the amount of battery remaining in an iconic tile, and a countdown app with a count down until I take a vacation. I have actively sought apps like these in the Store because I think they make my Start page look cool.

5. Configure the title of main page to pull from the AppResources.resx file

While we don't plan on localizing our application completely, I will go ahead and set up the app so that we could easily add it in the future.

Open the MainPage.xaml and locate the <phone:Pivot> element's Title attribute. Change it to:

Title="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"


Generic Episode Image

Now I'll change the app's title in the AppResources.resx. You'll find it in the Resources folder.


Generic Episode Image


Change the ApplicationTitle value to "SoundBoard". Save and close the file.


Generic Episode Image



To recap, not much new in this lesson per se, but these are the types of tasks we need to perform each time we undertake a new project. We did talk about a few new topics, like focusing on the design and interaction of the app, and choosing from the different types of tile templates that are available.



The Discussion

Add Your 2 Cents