Windows Phone 7 Hands On Lab

The first official Mobile Phone 7 Hands-On-Lab in Southern California was held at QuickStart Office in Irvine, CA this past Saturday September 11^th.  I was lucky enough to be one of the presenters along with Mark Rosenberg.  Chad Boyer was one of the proctors helping out quite a bit with people’s questions.  I have to admit I expected a positive response but not to this extend.  We literally ran out of seats and there was physically no room to sit about an hour into the presentations.

If you are interested in learning about WP7, this 12-hour day is for you.  The labs and lectures are skillfully created and narrated by Daniel Egan from Microsoft.  They cover all the key features of the phone.  At the end of the day you get to take the fully completed version of the lab with you home.

There were two questions asked frequently during the labs that I’d like to shed some light on:

-          Missing ApplicationBar icons

When you pick an icon to display on your application bar, you will notice that an ugly X is displayed instead when you run the application in the emulator. This is due to the fact that the ‘Build Action’ of Images added to the application is set to ‘Resource’.  To view this setting simply right mouse click on one of the images in Images\Icons fodler and select Properties.  Switch this setting to ‘Content’ and make sure ‘Copy to Output Directory’ is set to ‘Copy Always’.  This is due to the fact that your image files are added to the xap package as separate files and not resources.  To prove this to yourself, navigate to the bin\Debug directory of the application, change the extension of the xap file to zip and double click it.  You will see that the images are included as separate files in the target compressed xap file.  To refer to this kind of file, your ‘Build Action’ must be set to ‘Content’.

-          Global definition of an ApplicationBar

You can move the definition for an applicationBar to your app.xml where application wide resources are defined:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">

   <shell:ApplicationBar x:Key="GlobalAppMenuBar"

                              IsVisible="True" IsMenuEnabled="True"

                              BackgroundColor="#FF0000" Opacity="1.0" >

         <shell:ApplicationBarIconButton

…

  <shell:ApplicationBarIconButton

…

        </shell:ApplicationBar>

App.xml entries are simply name/value pairs in a hash table.  You refer to them from any xml page of your application using their Key.  From now on whenever you add a new Windows Phone 7 Page (either Portrait or Landscape), you should notice that all pages are of type phone:PhoneApplicationPage. These pages have a property called ApplicationBar similar to FontSize or DesignHeight properties.  Simply set it to your global definition using the following syntax:

ApplicationBar="{StaticResource GlobalAppMenuBar}"

As a result whenever you update your global definition of the ApplicationBar all pages get updated automatically.

Btw, the last three hours of the day are allotted for implementing something on your own and present it at the end.  Your application will be judged with the first place winner taking a $500 gift card, the second place winner a $200 card and the third place winner a $100 one.  The first place winner on September 11^th blew my mind.  He had an almost fully functional XNA shooting game to blow up spaceships – very impressive.

Let me summarize WP7 programming for you.  If you know Silverlight or XNA programming, you are 95% there.  The rest is simply getting to know the specific phone features such as GPS, Accelerometer and their associated APIs.  I anticipate hundreds of applications readily available as soon as the phone is released. 

The next two HOL sessions are on September 25^th (QuickStart, San Diego) and September 26^th (QuickStart, Irvine). Enjoy.