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

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

Traditional desktop applications often have a menubar with menus and items inside them that you can access:

[ menubars and menus are common in desktop applications ]

The menubar concept is great because it provides your users with easy access to common operations you want to perform. The equivalent of the menubar on the Windows Phone is the ApplicationBar. Much like the menubar in desktop applications, the ApplicationBar also provides your users with easy access to common operations, and it does so via clickable Buttons and MenuItems that expand and collapse as you play with it.

The following video gives you an example of what the ApplicationBar looks like:

[ a small video showing the ApplicationBar in action ]

Notice that initially all you see are the icons from the Buttons that live inside your ApplicationBar. As you play with it by dragging up on the dots or by clicking on the dots, you see the MenuItems and text labels on the Buttons also appear.

In this tutorial, you will learn how to create and modify an ApplicationBar visually using Expression Blend, so let's get started!

Getting Started
Make sure you have everything needed to get up and running with building Windows Phone applications. Launch Expression Blend and create a new Windows Phone application.

There are three major tasks when it comes to creating an ApplicationBar. These tasks involve actually creating an ApplicationBar (AppBar for short), adding the Buttons/MenuItems, and associating the Click event with an event handler so that your ApplicationBar actually does something besides simply looking functional. Letís look at each of these areas in greater detail.

Adding an ApplicationBar
To add an ApplicationBar to your page, look in your Objects and Timeline panel and make sure you have the PhoneApplicationPage node displayed:

[ ApplicationBars can only be added to Phone pages ]

Right click on the PhoneApplicationPage node and select the Add ApplicationBar item:

[ you know you want to click it! ]

Once you have selected Add ApplicationBar, you will see the beginnings of your ApplicationBar materialize on the design surface:

[ an empty region where your ApplicationBar will appear can be seen ]

The Application Bar in its current state is not very useful. It shines when it actually has content, and its content is basically the Buttons and MenuItems that live inside it. Let's look at them on the next page!

Onwards to the next page!

1 | 2 | 3

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