WP7 Application Bar

The Application Bar is very easy to use and very useful. I’ll try to summaries some general considerations for using an Application Bar in you WP7 application.

Menu
Whenever you need a menu in your application, consider using the Application Bar instead of creating your own menu system. This really helps creating a consistent user experience across all applications on the device. The Application Bar provides nice animations and rotation support out of the box.

Opacity and Size
You can adjust the opacity of the Application Bar, but Microsoft has recommended that you only use opacity values of 0, 0.5 and 1 to maximize display quality and visual effects.
By default the opacity is set to 1, which means that the Application Bar when visible will take space from the display. So the page will be resized to be the area of the screen not covered by the Application Bar. However if you set opacity to less than 1, the displayed page will be the size of the screen and the Application Bar overlaid on top of it. This was somewhat strange to me that there was no property on the Application Bar that specified if the Application Bar should be overlaid or not, instead you have to fiddle with opacity. Good at least that it is possible to have it “hoover” the screen anyway.

Colors
Try to sure to use the default system theme colors for the Application Bar if you do not have a specific case/reason to use customized colors. Just make sure you test the application in both light and dark theme when using custom colors since using custom colors for the Application Bar can affect the display quality of icons and some unwanted, unusual visual effects in the menu animations. I actually read in some post that custom colors on the Application Bar can even influence power consumption on some display types. Whether this is true or not I don’t know, but the general suggestion is to use the default system theme colors.

Localization
It is important that you are aware of that the Application Bar is not a Silverlight control and does not support data binding. So the string values used for the button labels needs to be hardcoded in the XAML code and cannot be localized. However you can also add an Application Bar to a page in C# which enables the possibility to localize the strings and you can of course programmatically modify the label values at runtime if you specify the Application Bar in XAML.

Code Sample
If you have Expression Blend, then it is extremly easy to add an Application Bar to your page.
Simply click the New button next to Application Bar in the Common Properties panel.

In the expanded section click on Buttons collection to add buttons to your Application Bar. Add one or more Microsoft.Phone.Shell.ApplicationBarIconButton items to your button collection and specify icon to use. In the common properties for the application bar icon button you can by using the IconUri drop down menu select on of the built in icons, or specify a Uri to your own icon.
In the same way as adding Application Bar buttons you can add Menu items through the Menu Item collection.

In XAML the code for adding an Application Bar will look something like the following


	<phone:PhoneApplicationPage.ApplicationBar>
		<shell:ApplicationBar>
			<shell:ApplicationBar.MenuItems>
				<shell:ApplicationBarMenuItem Text="menu item"/>
			</shell:ApplicationBar.MenuItems>
			<shell:ApplicationBarIconButton IconUri="/icons/appbar.add.rest.png" Text="Add"/>
		</shell:ApplicationBar>
	</phone:PhoneApplicationPage.ApplicationBar>

Advertisements
  1. No trackbacks yet.

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

%d bloggers like this: