Creating An Application Bar–Don’t Panic

Windows Phone From Scratch #31

The application bar sits at the bottom of your Windows Phone application and provides a set of hopefully not-too-cryptic icons,  along with an ellipses (…) that pops open the menu and the text associated with each icon.

Creating these icons by hand requires a bit more artistic skill than I have, so I’ve shied away for a bit, but it turns out that Blend makes creating an Application Bar a relatively trivial exercise.

To get started, open blend and create a new Windows phone application. Take a look at the Objects and Timeline panel and select the PhoneApplicationPage

Go to the properties tab in the upper right-hand corner, and find the Common Properties panel.  Notice the button “New” next to ApplicationBar. Clicking that button  opens the dialog for creating a new application icon.

As you can see, there are many options here, but to keep things simple you can click on the Button (Collection) ellipses to create a new Application Bar button.

The Collection Editor dialog opens. Click on Add Another Item and search for ApplicationBar… three items will appear and you want to select AplicationBarIconButton.

You are returned to the Collection Editor and here you need to fill in the Uri for an Icon.   Don’t Panic!  It turns out that Microsoft has supplied you with a host of useful icons, just click on the drop down, and scroll down to pick the icon you like (you are of course free to create your own icon using the guidelines supplied by Microsoft).

Add short explanatory text below the icon.

In my experience, most icons only work once you know what they mean, they are almost never self-explanatory.  In the absence of convention would an X naturally mean close? delete? erase? or “marks the spot?”

The text will appear when the menu is displayed.

That’s it, with the icon and Text in place you can add another button or click OK to finish. Your icon is now in place and Windows Phone will take care of its presentation (though you, of course, have to handle the click of the button).