Diving into Windows Phone 8 development, head first

Windows-Phone-8

UPDATE:  Please excuse the poor formatting. WordPress picks and selectively chooses the HTML and formatting it wants to keep, so at this point I’ve just given up and stopped trying to make it look nice.

This is an ongoing blog of my first adventure in Windows Phone 8 development. I do this so that others can follow along with my progress, but also so that I can share what I learn.

I often find myself stuck on even the most minute things, and based on my finding, it seems that others are frequently stuck on those very things as well. Case in point:

Loading BitmapImages into a dictionary

Seems simple enough, right? I mean I only wanted to create a dictionary with a

Courtesy of Mr. Henning's Blog

Courtesy of Mr. Henning’s Blog

string / Bitmap as key / value pair and look those up whenever the user said the name of the noncorroding image. In this example I wanted the user (child) to see the text “apple” on screen,  and say “apple” (the string), which would then have the phone display a picture of an apple (the Bitmap) onto the screen.

For the life of me I couldn’t get load a new Bitmap into the dictionary. This thread on StackExchange sums it up pretty well,  from user Darin Dimitrov:

Image is a base abstract class representing images in GDI+. Bitmap is a concrete implementation of this base class.

BitmapImage is a way to represent an image in a vector based GUI engine like WPF and Silverlight. Contrary to a Bitmap, it is not based on GDI+. It is based on the Windows Imaging Component.

To further compound the issue, BitMapImage passes in a Uri as a paramter. Until this week I had never been exposed to a Uri either. Fortunately the syntax is pretty simple, albeit ugly at times, and that explained my initial confusion. Here is the solution:

// Alphabet images that correspond to the words    
Dictionary<string, BitmapImage> AlphaImages;  

//Set up the dictionary of AlphaImages objects. 
 if (AlphaImages == null)
 {
     AlphaImages = new Dictionary<string, BitmapImage>();
     AlphaImages.Add("Apple", new BitmapImage(new Uri("/Assets/Apple.jpg", UriKind.Relative)));
 }

The Uri parameter was the confusing part for me, but thanks to fellow MVP Jim Perry (@MachXGames), I was able to resolve the issue. With that completed, I could now move on to the next step:

Speech Recognition

Courtesy of Standford.edu

Courtesy of Standford.edu

This is really the meat-and-potatoes of my project. WP8 has a deep API for speech recognition, so it took a bit of reading to really come to understand a lot of it.

MSDN has a great Speech Recognition sample, which provided a great base from which  I could start at. This particular sample has users say a color, then a bit fills the the bottom of the phone with that particular color. I dissected the code and saw that they used a dictionary (as I mentioned above) to store the color values.  It looked something like this:

 Dictionary<string, SolidColorBrush> _colorBrushes;
//Set up the dictionary of SolidColorBrush objects. 
 if (_colorBrushes == null)
 {
 _colorBrushes = new Dictionary<string, SolidColorBrush>();
 _colorBrushes.Add("red", new SolidColorBrush(Colors.Red));
}

This was easy enough to understand. I now needed to continue to build a dictionary for each letter of the alphabet. Looking deeper, we need to create the speech recognizer and speech synthesizer objects:

// Create the speech recognizer and speech synthesizer objects. 
 if (_synthesizer == null)
 {
     _synthesizer = new SpeechSynthesizer();
 }
 if (_recognizer == null)
 {
     _recognizer = new SpeechRecognizer();
    // Set up a list of colors to recognize.
     _recognizer.Grammars.AddGrammarFromList("Colors", _colorBrushes.Keys);
 }

For the life of me, I couldn’t understand where the parameter Colors was coming from. This article, Managing loaded grammars to optimize recognition for WP8 helped alleviate  this issue.  More on this tomorrow though.
Jams powering this session: http://www.ep-melody.com/en/

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s