Application Bar

Windows Phone 7 supports the Application Bar which allows menu functionality to be added to an Application that fits with the look and feel of the device.

www.cespage.com/silverlight/wp7tut2.html

Step 1

Start Microsoft Visual Studio 2010 Express for Windows Phone, then Select File then New Project... Select "Visual C#" then "Silverlight for Windows Phone" and then "Windows Phone Application" from Templates, select a Location if you wish, then enter a name for the Project and then click OK, see below:

New Project

Step 2

A Windows Phone application Page named MainPage.xaml should then appear, see below:

MainPage.xaml

Step 3

Right Click on the Entry for the Project in the Solution Explorer and choose "Add" then "New Folder", and give it the Name "images" (without quotes), see below:

Project Images Folder

Step 4

Download the following images (opacity.png & menu.png) by right-clicking on the images below and choose "Save Picture As..." or "Save Image As..." and Save them to a Folder on your computer:

Opacity Application Bar Icon Menu Application Bar Icon

Step 5

Right Click on the Entry for the "image" Folder for the Project in Solution Explorer, and choose "Add", then "Existing Item...", then in the "Add Existing Item" dialog select Folder you saved the images, then choose "Add" to add opacity.png and menu.png to the images folder in the project, see below:

Project Images Folder with Images

Step 6

While still in the Solution Explorer click on the "menu.png" image then goto the Properties box and change the Build Action to Content, do the same for the "opacity.png" image, see below:

Image Properties

Step 7

While still in the XAML Pane above the "<Grid x:Name="LayoutRoot" Background="Transparent">" Tag type the following ApplicationBar XAML:

<phone:PhoneApplicationPage.ApplicationBar>
  <shell:ApplicationBar IsVisible="True" IsMenuEnabled="False">
    <shell:ApplicationBar.Buttons>
      <shell:ApplicationBarIconButton Text="opacity" IconUri="/images/opacity.png" Click="Opacity_Click"/>
      <shell:ApplicationBarIconButton Text="menu" IconUri="/images/menu.png" Click="ShowMenu_Click"/>
    </shell:ApplicationBar.Buttons>
    <shell:ApplicationBar.MenuItems>
      <shell:ApplicationBarMenuItem Text="hide menu" Click="HideMenu_Click"/>
    </shell:ApplicationBar.MenuItems>
  </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

See below:

ApplicationBar XAML

Step 8

Right Click on the Page or the entry for "MainPage.xaml" in Solution Explorer and choose the "View Code" option. In the Code View below the "}" of the "public MainPage()" method type the following Event Handlers:

private void Opacity_Click(object sender, EventArgs e)
{
  if (ApplicationBar.Opacity == 0)
  {
    ApplicationBar.Opacity = 1;
  }
  else
  {
    ApplicationBar.Opacity = 0;
  }
}

private void ShowMenu_Click(object sender, EventArgs e)
{
  ApplicationBar.IsMenuEnabled = true;
}

private void HideMenu_Click(object sender, EventArgs e)
{
  ApplicationBar.IsMenuEnabled = false;
}

See Below:

MainPage Code

Step 9

Save the Project as you have now finished the Windows Phone Silverlight application. Select the Windows Phone Emulator option then Select Debug then Start Debugging or click on Start Debugging:

Start Debugging

After you do, the following will appear in the Windows Phone Emulator after it has been loaded:

Application Running

Step 10

You can click on the first button, Opacity which will toggle the Opacity of the Application Bar and the second button, Menu which will display the menu - click on the "..." to display the menu, see below:

Application Bar

Step 11

You can then Stop the application by selecting the Visual Studio 2010 application window and clicking on the Stop Debugging button:

Stop Debugging

This was a simple Application Bar example for Windows Phone - you can add up to four of the image style buttons so try adding more buttons, plus the menu can support more items - common features should be on the Application Bar and less common ones in the menu - make it your own!