MOBILE

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.

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

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

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

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

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

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

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

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

  2. 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.
Other  
  •  Adding an Application Bar to a Windows Phone 7 Application (part 1) - Adding Images for Use with Application Bar Buttons & Adding a Global Application Bar Using XAML
  •  iPhone Application Development : Creating and Managing Image Animations and Sliders (part 3) - Finishing the Interface
  •  iPhone Application Development : Creating and Managing Image Animations and Sliders (part 2) - Adding an Image View
  •  iPhone Application Development : Creating and Managing Image Animations and Sliders (part 1)
  •  iPhone Application Development : User Input and Output
  •  Windows Phone 7 : Using Accelerometer Data to Move a Ball
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 4) - Device Libraries
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 3) - Transcoders
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 2) - Detecting the Context
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 1) - HTTP
  •  Using Windows Phone 7 Technologies : Retrieving Accelerometer Data (part 2)
  •  Using Windows Phone 7 Technologies : Retrieving Accelerometer Data (part 1)
  •  Using Windows Phone 7 Technologies : Understanding Orientation and Movement
  •  Programming the Mobile Web : HTML 5 (part 4) - Client Storage
  •  Programming the Mobile Web : HTML 5 (part 3) - Offline Operation
  •  Programming the Mobile Web : HTML 5 (part 2) - The canvas Element
  •  Programming the Mobile Web : HTML 5 (part 1)
  •  Windows Phone 7 : Submitting Your First Windows Phone Application to the Windows Phone Marketplace
  •  Windows Phone 7 : Packaging, Publishing, and Managing Applications
  •  Mobile Application Security : Windows Mobile Security - Development and Security Testing (part 3)
  •  
    Top 10
    How an Access Control List Is Used
    SQL Server 2008 : Returning Data from DML Operations Using the OUTPUT Clause
    Positioning Elements in XAML
    Mobile Application Security : WebOS Security - Introduction to the Platform
    Windows Server 2008 : DHCP/WINS/Domain Controllers - Enhancing DHCP Reliability
    Windows 7 : Searching Your Computer (part 2) - Search Filters
    .NET security : Administering Isolated Storage
    iPhone 3D Programming : Adding Textures to ModelViewer (part 3) - Enabling Textures with ES1::RenderingEngine
    Understanding Windows 7 Personalization
    Windows Phone 7 : Working with Controls and Themes - Panorama and Pivot Controls
    Most View
    Building Custom Players with the Silverlight Media Framework
    Exchange Server 2010 : Keep Exchange Healthy (part 2) - Verify Exchange Server Health
    Deploying a Windows Server 2008 R2 Network Policy Server
    Synchronizing Mobile Data - Using Merge Replication (part 2) - Programming for Merge Replication
    Windows Phone 7 Development : Handling Errors in Rx.NET
    Programming with DirectX : Sound in DirectX - XACT3 (part 1) - XACT3 Tools
    SQL Server 2005 Encryption Key Hierarchy
    Programming .NET Security : Programming Digital Signatures (part 2) - Using the Implementation Class
    Programming .NET Security : Programming XML Signatures (part 2) - Embedding Objects in the Signature
    Managing System Properties
    Embed a Web Browser in Your Application
    Upload a File with FTP
    Optimizing for Vertical Search : Optimizing for Image Search (part 1) - Image Optimization Tips
    iPhone 3D Programming : Blending and Augmented Reality - Blending Extensions and Their Uses
    iPhone 3D Programming : Anti-Aliasing Tricks with Offscreen FBOs (part 2) - Jittering
    Sharepoint 2007: Get Started with Your Personal Site
    Using the Dynamic Keyword in C# 4.0
    Microsoft SQL Server 2005 : Report Definition and Design (part 5) - Report Builder
    Programming the Mobile Web : WebKit CSS Extensions (part 5) - Transformations
    Improve IIS 7.0 Performance