Windows Phone 7 : The Silverlight Controls (part 6) - Interactive Controls - ApplicationBar Controls

2.7. ApplicationBar Controls

The ApplicationBar is responsible for displaying the small toolbars that are often seen at the bottom of the screen. It can hold up to a maximum of four image-based application buttons, and also a potentially unlimited number of menu items. These can be used to offer access to common features within your game (getting help, showing the scores, starting a new game, and so on).

The ApplicationBar is not added to the page from the Toolbox, but rather it already exists as a property of the PhoneApplicationPage object that forms the basis for all the pages within Silverlight. To add an ApplicationBar, we therefore need to set the PhoneApplicationPage.ApplicationBar property to a new instance of the ApplicationBar class.

This can be achieved using code along the lines of that shown in Listing 9. This should be added to the XAML at the very end of the code, just before the closure of the root phone:PhoneApplicationPage element.

Example 9. A template for an ApplicationBar

<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar>
      <shell:ApplicationBarIconButton IconUri="/Images/AppBarButton1.jpg" Text="Button 1"/>
      <shell:ApplicationBarIconButton IconUri="/Images/AppBarButton2.jpg" Text="Button 2"/>
      <shell:ApplicationBar.MenuItems>
         <shell:ApplicationBarMenuItem Text="MenuItem 1"/>

					  

<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
      </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

This code produces an ApplicationBar that in its default state looks like the one shown in Figure 11.

Figure 11. The ApplicationBar in its default closed state

Tapping the ellipsis button on the right edge of the ApplicationBar will cause it to open, revealing the text for each of the buttons and the menu items hidden beneath (see Figure 12). Note that Silverlight has automatically set the text for the buttons and menu items into lowercase; this is the standard behavior across all Windows Phone 7 application bars and cannot be changed.

Figure 12. The ApplicationBar in its open state

To add more buttons, simply add additional instances if the ApplicationBarIconButton class (or indeed, remove the instances that are already there to show less buttons).

The IconUri property of each button is shown referencing an image file within the Images folder. These image paths must be entered manually because there is no Properties window editor to help you to select them.

Images should be created at 48 × 48 pixels and should be created so that they have a white foreground on a transparent background (using the alpha channel to enforce the transparency). The circle that can be seen displayed around the icons is added automatically and should not be part of the image. To allow for this circular outline, the icon should be restricted to the 26 × 26 pixel region in the centre of the provided image.

Buttons can be enabled or disabled using their IsEnabled property. When the user taps one of the buttons, its Click event will be fired.

Menu items can be added or removed as required by providing an appropriate number of ApplicationBarMenuItem objects. Microsoft recommends a maximum of five menu items to prevent the user having to scroll, but more than this can be added if required. Each menu item also has an IsEnabled property and a Click event.

The ApplicationBar also has several properties that can be used to control its appearance and function. The most useful of these are the IsVisible and Opacity properties.

Setting IsVisible to false will fairly predictably cause the menu to disappear.

The Opacity property has some more subtle behavior, however. When set to 1 (its default), it reserves some space from the page for itself, pushing the content above up and out of the way. Setting to any lower value than this will cause its background (though not the buttons themselves) to become less and less opaque, but will also cause it to stop reserving space within the page. The bar will therefore appear in front of any other page content that occupies the bottom area of the screen.

Figure 13 shows three pictures of an ApplicationBar. It is contained on a page that has a large Image control aligned to its bottom. The picture on the left has the Opacity property set to 1. Notice that it has pushed the Image up and out of the way. The pictures in the middle and on the right have Opacity values of 0.5 and 0, respectively. The background transparency has clearly changed, but you can also see that the Image is now appearing behind the ApplicationBar rather than above it.

Figure 13. ApplicationBars with varying levels of Opacity