Windows phone app

SoundBoard App for Windows Phone

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
https://dev.windowsphone.com/en-us/design/process
Also, there's also a template for sketching a "low tech mockup":
http://go.microsoft.com/fwlink/?LinkID=266572
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:


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:

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:



... and confirm the deletions ...



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 ...



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

4. Confirm the project icons are properly referenced

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



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


Windows Phone 8 supports three Tile templates: flip, iconic, and cycle. This link does a nice job explaining the different types:
http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202948(v=vs.105).aspx#BKMK_Tiletemplates
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}}"


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



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

Recap

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