The ‘METRO’ UI has some standards you should observe when using them so that consistency and usability remains solid over phone applications..

Application Bar Creation and Usage Best Practices

1. Use the Application Bar instead of creating your own menu system. This helps to create a consistent user experience across all applications on the device. Also, the Application Bar provides menu animation and rotation support for you.
2. Use the default system theme colors for the Application Bar unless there is a compelling reason to customize the colors. Using custom colors for the Application Bar can affect the display quality of the button icons, can cause unusual visual effects in menu animations, and can even influence power consumption on some display types.
3. The opacity of the Application Bar can be adjusted finely, but it is recommended that you only use opacity values of 0, .5, and 1.
4. Note that if the Application Bar opacity is set to less than 1, the displayed page will be the size of the screen, with the Application Bar overlaid on top of it. If the opacity is set to 1, the displayed page will be resized to be the area of the screen not covered by the Application Bar.

Icon Buttons UI Best Practices

1. Icon images should use a white foreground on a transparent background using an alpha channel. The Application Bar will colorize the icon according to the current style settings and colored icons can cause this effect to display unpredictably.
2. The circle displayed on each Icon Button is drawn by the Application Bar and should not be included in the source image.
3. Icon images should be 48 x 48 pixels in size. The white foreground graphic for the button should fit in a 26 x 26 area square in the center of the image so that it does not overlap the circle.
4. Do not use an Icon Button for a back button that navigates backwards in the page stack. Windows Phones are required to have a dedicated hardware back button that should always be used for backward navigation.
5. Use Icon Buttons for the primary, most-used actions in your menu. Some actions are difficult to convey  with an icon. If this is the case, you should using a Menu Item instead.
6. Choose icons that have clear meanings when the Application Bar is rotated. The Application Bar automatically handles changes in screen orientation. When the device is in a landscape orientation, the menu is displayed vertically on the side of the screen. The icon buttons are rotated so that they appear upright to the user, but the order of the icons in the list is not changed. It is possible for icon meanings to be confused when this occurs, particularly if two of the icons are mirror images of each other along the Y axis.

MENU ITEMS

1. Avoid using more than five Menu Items on an Application Bar as it will force the user to scroll.
2. Avoid using Menu Item text that is too long as the text will run off the screen. The recommended maximum length is between 14 and 20 characters.
3. To create a consistent user experience with the rest of the device, Menu Item text is automatically converted to all lower-case characters.

Let’s add an Application Bar to your Phone Application in XAML

Before you can use the Application Bar in your application, you must add a reference to the correct assembly in your Windows Phone project.

To add a reference to the Application Bar dll

Open a new or existing Windows Phone solution in Visual Studio.

From the Project menu, select Add Reference…

On the .NET tab, select the component name “Microsoft.Phone.Shell” and click OK

Add Icon Button Images to Your Project

Before you can use images for icon buttons in the Application Bar, you must add them to your project in Visual Studio.

To add icon button images to your project : Create a subdirectory for your image files, in Solution Explorer, right-click the icon for your project and select Add and then New Folder. Rename the folder to “Images”.

Next, in  Windows Explorer, copy your icon images into the Images folder under the directory from your project.

In Solution Explorer in Visual Studio right-click on the Images folder and select Add and then Existing Item…. Select one of your images or hold down Ctrl and select multiple images and then click Add.

For each of your images, right-click the image in Solution Explorer and select Properties.

Set the Build Action property to “Content” and set the Copy to Output property to “Copy always”.

Creating an Application Bar in XAML

You can create an Application Bar, assign it to a page, and set event handlers for icon buttons and menu items by adding a few elements to the XAML for your page. These steps assume that the page you are editing was generated using the default template by Visual Studio. The namespace prefixes associated with some of the elements may be different if you are using XAML from another source.

STEPS

Open the XAML file for the page to which you will add the application bar. In Solution Explorer, right-click on the .xaml file for the page (by default, the main page for a new application is called “MainPage.xaml”) and select Open.

Add a namespace declaration to set the namespace prefix for the Windows.Phone.Shell assembly to “shell:” by adding the following line to the phoneNavigation:PhoneApplicationPage element in the XAML.

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

Add a phoneNavigation:PhoneApplicationPage.ApplicationBar element inside the phoneNavigation:PhoneApplicationPage element. The phone application page object has a built-in ApplicationBar property and the contents of this element will define the Application Bar for this page.

<phoneNavigation:PhoneApplicationPage.ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>

In the phoneNavigation:PhoneApplicationPage.ApplicationBar element, add a shell:ApplicationBar element. You can set any of the properties of the Application Bar in this element, however this time we will  set the visibility to True and the IsMenuEnabled property to True.

<shell:ApplicationBar Visible="True" IsMenuEnabled="True">
</shell:ApplicationBar>

Add a shell:ApplicationBar.Buttons element to the shell:ApplicationBar element. This element will contain the definitions for the Application Bar’s icon buttons.

<shell:ApplicationBar.Buttons>
</shell:ApplicationBar.Buttons>

Now, add one or more shell:ApplicationBarIconButton elements to the shell:ApplicationBar.Buttons element. This represents the icon button. You will need to provide a URI to the image file for the icon button. If you placed your images in the folder specified previously in this topic, the paths in this example will be correct. Add a click handler by setting the Click attribute of the element. Visual Studio will display a context menu containing the text “<New Event Handler>” after you have typed “Click”. If you select this item, the tools will generate an event handler in the .cs file for this page.  REMEMBER: If you copy and paste the code, you will need to create the event handlers manually. 

<shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click" 
IconUri="/Images/MyButton1.png"></shell:ApplicationBarIconButton>
<shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click_1" 
IconUri="/Images/MyButton2.png"></shell:ApplicationBarIconButton>

Add a shell.ApplicationBar.MenuItems element as a child of the shell.ApplicationBar element. This element will contain the definitions for the Application Bar’s menu items.

<shell:ApplicationBar.MenuItems>
</shell:ApplicationBar.MenuItems>

Now, add one (or more than one) shell:ApplicationBarMenuItem elements to the shell.ApplicationBar.MenuItems element. The Text attribute specifies the text that will be displayed in the menu. The click handler is set the same as for the icon buttons.

<shell:ApplicationBarMenuItem Click="ApplicationBarMenuItem_Click" Text="First Menu">
</shell:ApplicationBarMenuItem>
<shell:ApplicationBarMenuItem Click="ApplicationBarMenuItem_Click_1" Text="Second Menu">
</shell:ApplicationBarMenuItem>

Now, when you run your application, the Application Bar will be displayed. The only thing left to do is implement your event handlers to take some action when the user taps on one of the icon buttons or menu items. The following code snippet shows the whole XAML element for the Application Bar. Remember that if you copy and paste this code, you will need to create your own event handler declarations because the handler methods will not automatically generated.

<phoneNavigation:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Visible="True" IsMenuEnabled="True">
    <shell:ApplicationBar.Buttons>
      <shell:ApplicationBarIconButton x:Name=”button1” Click="button1_Click" 
        IconUri="/Images/MyButton1.png">
      </shell:ApplicationBarIconButton>
      <shell:ApplicationBarIconButton x:Name=”button2” Click="button2_Click" 
        IconUri="/Images/MyButton2.png">
    </shell:ApplicationBarIconButton>
    </shell:ApplicationBar.Buttons>
    <shell:ApplicationBar.MenuItems>
      <shell:ApplicationBarMenuItem x:Name=”menuItem1” Click="menuItem1_Click" Text="First Menu">
      </shell:ApplicationBarMenuItem>
      <shell:ApplicationBarMenuItem x:Name=”menuItem2” Click="menuItem2_Click" Text="Second Menu">
      </shell:ApplicationBarMenuItem>
    </shell:ApplicationBar.MenuItems>
  </shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>

You will have to write/code an event handler for button or menu item Click events.

private void button1_Click(object sender, EventArgs e)
{
  // add your button functionality in this event handler..
}