Creating an Application Bar - Page 2
by kirupa |  19 September 2010

  Have questions? Discuss this Windows Phone tutorial with others on the forums.

In the previous page you learned what an ApplicationBar is and how to add one to your page. In this page, let's delve a little deeper and look at how to add ApplicationBar Buttons to the ApplicationBar you have created.

Adding an ApplicationBar Button
The ApplicationBar Button (known internally by its enemies as ApplicationBarIconButton) is the circular outline with an icon that is prominently visible when a page with an ApplicationBar is displayed:

[ say hello to your ApplicationBar Buttons! ]

Initially, only the ApplicationBar icons would be visible, but a text label will appear when you interact with the dots:

[ the text labels are never shown by default ]

To add an ApplicationBar Button, right click on the second ApplicationBar node in your Objects and Timeline panel and select Add ApplicationBarIconButton:

[ right click on the ApplicationBar to add a Button for it ]

Once you have done this, an ApplicationBarIconButton will be added to your ApplicationBar in the usual places in your Objects and Timeline panel and the design surface. Since the design surface is more interesting, here is a screenshot of that:

[ an empty ApplicationBar Button is displayed ]

You will now see an ApplicationBar Button that is both lonely and empty on the inside with its only friend being some generic text. Letís give it a reason to live by setting an icon image and changing its default text. Both can be done via the properties visible for this on the Properties Inspector:

[ the two properties we care about are the icon and text label ]

Changing the Icon
To change the icon, click on the drop-down next to the IconUri property. A menu will appear with a list of common icons that you can use:

[ a list of icons installed by the Windows Phone SDK will appear ]

Select any icon you want from this list. Once an icon has been selected, it will be applied to your ApplicationBar Button, and the icon will be added locally to your project.

Here is what your ApplicationBar Button looks like right now:

[ your ApplicationBar Button is slowly taking shape ]

The icon you used is added to an icons directory at the root of your project:

[ an icons directory houses any ApplicationBar icons you use ]

If you want to use your own icon that is different from the ones provided by the Windows Phone SDK, you can click on the Ö button and browse for the icon you are interested in:

[ you can always use your own icons as well ]

Do keep in mind the guidelines for ApplicationBar Button icons. The icons must be 48x48 sized PNG files with a transparent background and a flat-white colored design. The consistency gods will smite you if you deviate from that with your custom icons.

Changing the Text
I should warn you that this part is not as interesting as setting the icon. To change the text that gets displayed, make sure your ApplicationBar Button is selected and change the value of the Text property in your Properties Inspector:

[ the Text property defines the text that is displayed ]

Once you made your change, you will see your text appear below the ApplicationBar Button:

[ w00t. your text now appears ]

Try to keep your text fairly short in length. If your text is too long, characters will get clipped. Since there is no good way to know how much space your characters will take up in the non-fixed-width font that is used, youíll have to visually gauge the length of the text to make sure everything is cool.

One thing to keep in mind is that you can only have, at most, four ApplicationBar Buttons in your ApplicationBar. Expression Blend will prevent you from adding any more once your fourth ApplicationBar Button hits earth.

We have just finished up our look at the ApplicationBar Button. Let's focus our attention next to the MenuItems!

Onwards to the next page!

1 | 2 | 3

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.