Using the ApplicationBar

Visual Studio provides you with a starting point by placing the markup for an ApplicationBar in a comment block when you create a new Windows Phone Portrait Page, a Windows Phone Landscape Page, and various Windows Phone projects using the Add New Item and New Project dialogs.

The ApplicationBar requires a namespace alias at the top of your page or control, as shown:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

The markup for an ApplicationBar element is placed in the page’s phone:PhoneApplicationPage element. Placed within it are ApplicationBarIconButton elements and a MenuItems element containing ApplicationBarMenuItem, as shown in the following example:

Click here to view code image

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton
                        IconUri="/Images/appbar_button1.png"
                        Text="Button 1"/>
        <shell:ApplicationBarIconButton
                        IconUri="/Images/appbar_button2.png"
                        Text="Button 2"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

When your PhoneApplicationPage is created, its ApplicationBar property is automatically assigned to the ApplicationBar instance if it exists.

The ApplicationBar consists of two collections of items, each with a corresponding ApplicationBar property: Buttons and MenuItems. The Buttons property is the ApplicationBar’s Content property, which means that in XAML any items located directly as child elements of the ApplicationBar element must be ApplicationBarIconButtons and are placed in the ApplicationBar.Buttons collection automatically.

Figure 8.1 shows an example of an application bar in its expanded state.

FIGURE 8.1 Expanding the application bar reveals its menu items.

To prevent the menu section from being expanded, set the ApplicationBar.IsMenuEnabled property to false. To hide the application bar entirely, set the ApplicationBar.IsVisible property to false.

The system tray is 32 pixels high in portrait mode and 72 pixels wide in landscape mode. It always extends to the edge of the screen.