Adding an Application Bar to a Windows Phone 7 Application (part 3) - Adding an Application Bar Using Managed Code

5. Adding an Application Bar Using Managed Code

The second way to create an Application Bar for a Windows Phone 7 application is to use one of the .NET languages. At the time of this writing, only C# is supported, but plans to support other .Net languages are certainly in the works. Perhaps when you read this, it may even be possible to write applications for Windows Phone 7 with F#!

The steps necessary to create an Application Bar using C# are described here. But first, be sure to remove all of the Application Bar XAML code you wrote for the previous walkthroughs.

1. You will be editing the MainPage code of your application. To accomplish that, locate the MainPage.xaml.cs file by expanding the MainPage.xaml file in the Solution Explorer. Right-click MainPage.xaml.cs and select View Code.

2. For easier reference to an Application Bar component inside the Microsoft.Phone assembly (i.e., to avoid typing Microsoft.Phone.Shell.ApplicationBar before each component name), add the following using directive to the top of the MainPage.xaml.cs file:

   using Microsoft.Phone.Shell;

   
   

3. Inside the constructor for the page (i.e., inside the public MainPage() code block), right after InitializeComponent(), initialize the Application Bar and set its IsVisible and IsMenuEnabled properties, as shown in the following code:

   ApplicationBar = new ApplicationBar();
   ApplicationBar.IsVisible = true;
   ApplicationBar.IsMenuEnabled = true;

   
   

4. Initialize Application Bar buttons, providing the relative URI to the image that will be used for each button. Note that you must set the Text property of each button—otherwise you will cause an exception.

   ApplicationBarIconButton btnAdd = new ApplicationBarIconButton(new
   Uri("/Images/appbar.add.rest.png", UriKind.Relative));
   btnAdd.Text = "add";
   ApplicationBarIconButton btnSave = new ApplicationBarIconButton(new
   Uri("/Images/appbar.save.rest.png", UriKind.Relative));
   btnSave.Text = "save";
   ApplicationBarIconButton btnDelete = new ApplicationBarIconButton(new
   Uri("/Images/appbar.delete.rest.png", UriKind.Relative));
   btnDelete.Text = "delete";

   
   

5. Add the buttons to the Application Bar via the following code:

   ApplicationBar.Buttons.Add(btnAdd);
   ApplicationBar.Buttons.Add(btnSave);
   ApplicationBar.Buttons.Add(btnDelete);

   
   

6. Next, we will create two menu items that will appear as text when the ellipsis button is clicked next to the icons on the Application Bar. Very similar to adding icons, there are initialization and addition steps for each menu item. The initialization code for the menu items looks like this:

   ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem("Menu Item 1");
   ApplicationBarMenuItem menuItem2 = new ApplicationBarMenuItem("Menu Item 2");
   
   					  

   
   

The strings "Menu Item 1" and "Menu Item 2" are the text for the two menu items; in your application, you will certainly change that text to something much more meaningful and fun.

7. Add menu items to the Application Bar.

   ApplicationBar.MenuItems.Add(menuItem1);
   ApplicationBar.MenuItems.Add(menuItem2);

   
   

8. Finally, you are ready to test the Application Bar. Save your work and press F5 to start debugging the application using Windows Phone 7 emulator.. If you click the ellipsis to the right of the icons, the Application Bar slides up, revealing two menu items, identical to Figure 1.

The full code listing for adding the Application Bar using managed C# code appears here. The full MainPage() constructor listing is included for readability purposes.

Listing 2. C# Code to Implement an Application Bar

public MainPage() { InitializeComponent(); SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape; ApplicationBar = new ApplicationBar(); ApplicationBar.IsVisible = true; ApplicationBar.IsMenuEnabled = true; ApplicationBarIconButton btnAdd = new ApplicationBarIconButton(new Uri("/Images/appbar.add.rest.png", UriKind.Relative)); btnAdd.Text = "add"; ApplicationBarIconButton btnSave = new ApplicationBarIconButton(new Code View: Scroll / Show All Uri("/Images/appbar.save.rest.png", UriKind.Relative)); btnSave.Text = "save"; ApplicationBarIconButton btnDelete = new ApplicationBarIconButton(new Uri("/Images/appbar.delete.rest.png", UriKind.Relative)); btnDelete.Text = "delete"; ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem("Menu Item 1"); ApplicationBarMenuItem menuItem2 = new ApplicationBarMenuItem("Menu Item 2"); ApplicationBar.Buttons.Add(btnAdd); ApplicationBar.Buttons.Add(btnSave); ApplicationBar.Buttons.Add(btnDelete); ApplicationBar.MenuItems.Add(menuItem1); ApplicationBar.MenuItems.Add(menuItem2); }

While adding the Application Bar to Windows Phone 7 is cool in itself, we cannot do much with that Application Bar right now. We can push buttons a few hundred times, but nothing changes on the phone screen or inside the application. To react to button press events, we need to write some managed (C# in our case) code, also called the event handler code. In the next section, you'll learn how to write code that processes and reacts to the button press events.