Adding an Application Bar to a Windows Phone 7 Application (part 2) - Adding a Local Application Bar Using XAML & Adding Menu Items

1/30/2011 10:00:22 AM

3. Adding a Local Application Bar Using XAML

One of the two ways to add a local Application Bar to a Windows Phone 7 application is to use XAML markup. Using XAML markup wherever possible is considered best practice since it allows for the separation of design (XAML) and logic (C#) of an application. The following steps show the XAML you need to add to ApplicationBarSample to construct a local Application Bar for the app.

In Solution Explorer, right-click the MainPage.xaml and select Open. This action causes Visual Studio to display the XAML code for the application's main page.
You must define a PhoneNavigation element within XAML before adding an Application Bar. To accomplish that, inside the phone:PhoneApplicationPage, add a phone:PhoneApplicationPage.ApplicationBar element, as shown here. Notice how this element is automatically available for selection via Visual Studio IntelliSense once you start typing the first few characters—an excellent way to ensure that there are no spelling errors.
```
<phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
```
It is now time to add the Application Bar XAML to the page. Inside the phone:PhoneApplicationPage.ApplicationBar element, add a shell:ApplicationBarIsVisible and the IsMenuEnabled properties to True, and set the Opacity property to 1, as illustrated here. element. Set the
```
<shell:ApplicationBar Opacity="1" IsVisible="True" IsMenuEnabled="True">
        </shell:ApplicationBar>
```
Now that you have created an Application Bar in XAML, you are ready to create buttons for it. The buttons you add are a part of the shell:ApplicationBar.Buttons element, so let's go ahead and add that element now inside the shell:ApplicationBar element:
```
<shell:ApplicationBar.Buttons>
</shell:ApplicationBar.Buttons>
```
Inside the shell:ApplicationBar element, you will create three shell:ApplicationBarIconButton XAML elements to add three button definitions: one for Add, one for Save, and one for Delete. If we had any text-based menu items to add, the ellipsis in the right corner of the Application Bar would be created automatically for us by Windows Phone 7. The ellipsis is not counted as one of the buttons on the Application Bar; therefore we could have a maximum of four buttons plus an ellipsis. The XAML markup to add three buttons is shown here:
```
<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.jpg" Text="add">
</shell:ApplicationBarIconButton>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.jpg" Text="save">
        </shell:ApplicationBarIconButton>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar.delete.rest.png"
Text="delete">
        </shell:ApplicationBarIconButton>					  
```
Note that the IconUri properties in this code snippet refer to the default names of the images that come as part of the download from Microsoft. If you have changed default names of those images, make sure to properly edit the reference used in IconUri as well. Also note the Text element—it is a required element and it cannot be an empty string. This text will be visible if you click the ellipsis in the right corner of the Application Bar, as shown in Figure 1.
At this point, you are done creating Icon Buttons and should make sure that the shell:ApplicationBar.Buttons element is properly closed. You can go ahead and press F5 to view the results of your work—the Application Bar containing three items should be shown at the bottom of the phone screen.

Now it's time to add some menu items to the Application Bar. Since menu items are text-based, they are useful in cases where text conveys a better meaning of the shortcut than an icon in the Application Bar. Of course, if we need more than four items to be present in the Application Bar, our only choice is to resort to menu items. In the next section, we'll add menu items to our Application Bar.

4. Adding Menu Items

Let's add two menu items, "Menu Item 1" and "Menu Item 2," to the ApplicationBarSample app.

All menu items are a part of shell:ApplicationBar.MenuItems element, so go ahead and add that element now inside the shell:ApplicationBar element:
```
<shell:ApplicationBar.MenuItems>
</shell:ApplicationBar.MenuItems>
```

Finally, we will define MenuItems themselves by adding shell:ApplicationBarMenuItems inside the shell:ApplicationBar.MenuItems element:

<shell:ApplicationBarMenuItem Text="Menu Item 1" IsEnabled="True">
        </shell:ApplicationBarMenuItem>
<shell:ApplicationBarMenuItem Text="Menu Item 2" IsEnabled="True">
        </shell:ApplicationBarMenuItem>

If you run the application, you will now see an Application Bar displayed by the Windows Phone emulator . If you click the ellipsis to the right of the icons, the application bar slides up, revealing the two menu items, identical to Figure 1. Try it by pressing F5.

Let's talk briefly about the Opacity property of an Application Bar we used in this example. Even though its values can range from 0 to 1, Microsoft recommends that developers use only three values for this property: 0, 0.5, and 1. If the Opacity is set to anything less than 1, the Application Bar will overlay the displayed page of an application. If Opacity is set to 1, however, the Application Bar will have a dedicated region at the bottom of the screen and will not be overlaying any portion of an application.

The full XAML markup for creating an Application Bar with three main icons and two menu items is shown here.

Listing 1. XAML Code to Implement an Application Bar

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Opacity="1" IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBar.Buttons>
               <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png"
Text="add">
               </shell:ApplicationBarIconButton>

<shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png"
Text="save">
               </shell:ApplicationBarIconButton>
               <shell:ApplicationBarIconButton IconUri="/Images/appbar.delete.rest.png"
Text="delete">
               </shell:ApplicationBarIconButton>
            </shell:ApplicationBar.Buttons>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Menu Item 1" IsEnabled="True">
                </shell:ApplicationBarMenuItem>
                <shell:ApplicationBarMenuItem Text="Menu Item 2" IsEnabled="True">
                </shell:ApplicationBarMenuItem>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Adding an Application Bar via XAML is pretty straightforward thanks to all the powerful and easy-to-use tooling provided by Visual Studio 2010. Using XAML allows you to separate presentation from logic, which is a very good practice. We recommend you use XAML wherever possible. Sometimes, however, XAML alone is not sufficient for the task. Luckily, it is perhaps even easier to work with the Application Bar from managed code, especially if you have a little bit of programming experience. In the next section, we will show you how to do that.