Adding an Application Bar

Windows Phone From Scratch #46

In a recent posting I wrote about creating Conway’s Life for the phone.  The application is a tinkerer’s playhouse and I find myself going back to it to add features and tweaks.

This morning I decided it would be nice to let the user slow down the interval between generations. To do this, I wanted a pair of buttons (slower and faster).  This turned out to be absurdly easy.

You can create your Application Bar and buttons in Xaml by hand. You also can do an appendectomy through your mouth, but it takes longer and hurts more.  The right answer is to open the project in Expression Blend. 

To see this, create a new application in Expression Blend.  Put some TextBlocks and/or Buttons into the content area and then, when you are ready, click on [PhoneApplicationPage] in the Objects and Timeline panel.  Next, go to the Common Properties sub-panel (on the Properties panel) and click on the New button next to ApplicationBar.  A new subpanel will open, and the second line has an ellipses button next to the Buttons (Collection) label.   Click on the ellipses to open the Collection Editor.  Click Add Another Item  which opens the Select Object dialog box.

You will probably need to click the Show All Assemblies CheckBox. Expand Microsoft Phone and then expand Microsoft.Phone.Shell. Click on ApplicationBarIconButton and click OK. 

This returns you to the Collection Editor. Notice the Common Properties panel within the editor.  Drop down the IconURI drop box to pick one of the standard and pre-created icons.  Be sure to fill in the text and then either click Add Another Button or click OK to close the Collection Editor.

Open the Xaml view in Blend or, even better, save all and then open the project in Visual Studio.  Add a click event to the button(s) on the Application Bar and add event handlers in the code behind. 

That’s all there is to it.  Easy as cake.