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
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:
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
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.
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.
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