Creating a Windows Phone 7 Application Bar

The Application Bar is the almost like a toolbar in a Windows Phone 7 application.

The Application Bar provides a place for developers to display up to four
of the most common application tasks and views as icon buttons.

— Windows Phone 7 Design and Interaction Guide

Windows Phone 7 Application Bar  

As you would expect its easy enough to add one of these to your page with the following XAML: 

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton IconUri="/images/button1.png" Text="Recent" />
                <shell:ApplicationBarIconButton IconUri="/images/button2.png" Text="Nearest" />
            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

This assumes that you’ve imported the Microsoft.Phone.Controls namespace as phone, using the following: 

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

ApplicationBar is not a Silverlight Control

That the Application Bar is part of the Phone OS, it is not a Silverlight control – or more correctly it’s not a FrameworkElement. This has a couple of implications.

Firstly the resource images used by the control must have their Build Action set to Content not Resource as is usually the case with Silverlight resources. This is because it is the OS that is displaying the bar not your application, so the icons need to be compiled as resources for the OS to access them.

Build Action set to Content

Secondly, as it is an OS control Expression Blend won’t know what to do with it either. A place holder will show up in Blend but you won’t see your customisations and won’t be able to set design time properties on it.

Thirdly it has no Silverlight means no dependency properties. No dependency properties means no binding goodness. You’re on your own with the XAML there. If you need to make it dynamic (such as localising the language) you need to write come code to update it.

Default Icons

A set of 64 Application Bar icons are included in the WP7 SDK (find them in c:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons. Note however that they provide 32 dark and 32 light versions of the same icons. Only the white icons should be used in the Application Bar. If you want to create your own icons the Microsoft Design Templates for Windows Phone 7 have some guidance on the format. They should be 48x48px, have a white foreground colour and use the Segoe WP SemiBold font for any characters (although text only icons are not allowed). Bear in mind that the white circle around the icon is added automatically by the OS, you don’t have to include it in your icon.

Application Bar Menu

Adding menu items to the bar is done in exactly the same way, except you’re adding ApplicationBarMenuItems to the MenuItems collection on the ApplicationBar.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s