Application Bar for your Windows Phone 7

If you are working with Windows Phone 7, the first thing that you should have noticed is the very own Application bar. Application Bar is present in most of the applications that you use in your Windows Phone 7. This is basically a standard Toolbar with a menu associated with it which allows you to enumerate the commonly used commands in a standard location. While creating your application, Microsoft strongly recommends you to add an application bar, to ensure the user have common behaviour for every application. You can think Application bar similar to TaskBar of windows.

Components of Application Bar

An application Bar is made up with two components:

1. ApplicationBar Buttons
2. ApplicationBar Menu


The applicationbar buttons are always visible for an application which is used to list only the items that needed to be frequently used while dealing with the application. Lets say you create a Text processing application, you can list the File->Open and File-Save commands as ApplicationBarButtons.

ApplicationBarMenu pops up when the user clicks on either the blank space of the application bar or the special button with 3 dots. The Application Menu is used to list the items that are not used often but needed sometimes in the context.



To create an ApplicationBar lets add this XAML on the bottom of the screen. If you are using Visual Studio template, you would see it commented out for every page you create.

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.edit.rest.png" Text="Edit"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.download.rest.png" Text="Download"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.favs.rest.png" Text="Favourite"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.folder.rest.png" Text="Folder"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Item1"/>
                <shell:ApplicationBarMenuItem Text="Item2"/>
                <shell:ApplicationBarMenuItem Text="Item3"/>
                <shell:ApplicationBarMenuItem Text="Item4"/>
                <shell:ApplicationBarMenuItem Text="Item5"/>
                <shell:ApplicationBarMenuItem Text="Item6"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

ApplicationBarIconButton

In the image above you can see the ApplicationBar lies on the bottom of the screen. The ApplicationBar shows few buttons that I have added. When we click either on the blank area of the application bar or the special button appears on the right side of the bar, the applicationMenu pops up. You can at most add four buttons as ApplicationIconButton only. If you want to add more you need to create this bar of your own.

To write your command you can handle the Click eventhandler and write your code. A sample ApplicationbarIconButton looks like :

<shell:ApplicationBarIconButton IconUri="/Images/appbar.edit.rest.png" Text="Edit" Click="ApplicationBarIconButton_Click" IsEnabled="True"/>

You should remember, the images that you add as IconUri should be 48X48 size png which is added as content.

You can use SDK folder to find a complete set of Icons available for you.

ApplicationBarMenuItem

From the image above it shows only 5 items properly. The MenuItem can also use Click eventhandler to work. A sample ApplicationBarMenuItem will look like :

<shell:ApplicationBarMenuItem Text="Item1" IsEnabled="True" Click="ApplicationBarMenuItem_Click"/>

Things to Remember :

1. You cannot use MVVM pattern with Application Bar components. It does not expose Command pattern and you can only use click eventhandler to work.
   
2. Menu does not allow you to specify Icons. It can have Text only.
   
3. Icons used for ApplicationBar command buttons should be of 48X48 size. You do not need to create icons for your own, rather you can use some of the images that is listed in Program Files \ Microsoft SDK\Windows Phone\Icons folder.
   
4. You are restricted to use 4 ApplicationBarIconButtons inside an application bar and any number of ApplicationBarMenuItem. But only 5 items of ApplicationBarMenuItem will be visible on the screen.
   
5. Icons needed to be added as Content to make them appear on the device.
   
6. You need not to be bother about the theme where the images are to be used, it will automatically change its color based on the theme which user chooses.
   

Conclusion

For every application, one should use ApplicationBar so that the user experience could be increased. As it is taken as standard, user would like to use it more than any other custom application UI. Few automatic adjustments made based on the user settings on the application bar giving it more edge. I hope you will use it more often for your application and I hope the writing will help you dealing with it.

Thank you for reading.