Eugene Chaikin

general¶

top pages¶

Windows Phone 7 Application Bar

RSS

Modified on 17.08.2010 09:19 by eugenedotnet Categorized as Development, Windows Phone 7

(10) » Silverlight vs Silverlight for Windows Phone » Tic Tac Toe game for Windows Phone 7 » Windows Phone 7 Application Bar

In this lesson I will show few ways how to add an application bar to your Windows Phone 7 application. Creating an application bar is a very important part of development for windows phone as it increases a speed of navigation and usability level of your application. I have found three basic ways of creating an application bar and I will share those ways with you during this lesson. There are two types of items that can be added to an application bar: MenuItems and IconButtons. Both types will be covered by this lesson.

Requirements:

Visual Studio 2010 with Windows Phone Developer Tools
Windows Phone 7 emulator
Silverlight 4+

Additional information:

Add an Application Bar to Your Application for Windows Phone (MSDN)

Lesson contains:

Global Application Bar
Local Application Bar
Creating Application bar programmatically
Adding Icon Buttons
Adding events to Application bar

eugenedotnet windows phone 7 application bar

1. Creating a new project

First of all you need to create a new project. To do so open Visual Studio 2010 -> File -> New Project -> select Windows Phone Application there as it is shown on picture bellow.

eugenedotnet creating windows phone 7 project for application bar

eugenedotnet creating windows phone 7 project for application bar

2.1 Global Application Bar

If you have an application with many xaml files and if you would like to have a single application bar for some of them then Global Application bar is a best option in that case. To add a global application bar you need to modify App.xaml file. In general, App.xaml contains all global variables, resources and styles that can be used in your windows phone application. You simply need to add an Application bar within <Application.Resources> tag with three menu items(Home, Help, About) and set the opacity of a bar to 0.7 (check example bellow). Also you need to set x:Key attribute to "globalApplicationBar" or any other name you like, because that key will be used in future within your xaml files.


<shell:ApplicationBar x:Name="globalApplicationBar" x:Key="globalApplicationBar" Opacity="0.7">
   <shell:ApplicationBar.MenuItems>
      <shell:ApplicationBarMenuItem Text="Home" />
      <shell:ApplicationBarMenuItem Text="Help" />
      <shell:ApplicationBarMenuItem Text="About" />
   </shell:ApplicationBar.MenuItems> 
</shell:ApplicationBar>

Next step is to go to MainPage.xaml (or any other xaml file) and add Global Application bar declaration to <phone:PhoneApplicationPage> tag as a static resource(last row in xaml bellow). Pay attention that it uses the value of x:Key from App.xaml.


<phone:PhoneApplicationPage 
    x:Class="ED_ApplicationBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True"
    ApplicationBar="{StaticResource globalApplicationBar}">

Your first global application bar will look like that:

2.2 Local Application bar

If you want to add a custom application bar to one of your XAML files then creating a local Application bar is the best option to choose. Basically, you can do it in both: code and xaml. In this part I will explain how to add it to XAML file. First of all you need to open your xaml file (in my case it is MainPage.xaml). Make sure that no global application bar is included (ApplicationBar attribute is not set).


<phone:PhoneApplicationPage 
    x:Class="ED_ApplicationBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">

Next step is to create local application bar itself. I will copy the same application bar XAML I have created above(for Global Application Bar) and paste it inside <phone:PhoneApplicationPage.ApplicationBar> tag (xaml example bellow) and this ApplicationBar tag should be placed inside <phone:PhoneApplicationPage> in MainPage.xaml file.


<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar x:Name="globalApplicationBar" x:Key="globalApplicationBar" Opacity="0.7">
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Home" />
            <shell:ApplicationBarMenuItem Text="Help" />
            <shell:ApplicationBarMenuItem Text="About" />
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Your first custom application bar is now created.

2.3 Creating Application bar programmatically (in code)

Sometimes developers need to create an application bar programmatically using managed code(C# in our case). From my point of view it is the most agile method for adding a bar, because you can apply some additional configuration options or complex business logic to it. Simply, all you need to do is to open class of your xaml file (codebehind), add namespace reference there to Microsoft.Phone.Shell and add the following code(for example to Constructor of class):


using Microsoft.Phone.Shell;


ApplicationBar appBar = new ApplicationBar();
appBar.Opacity = 0.7;
appBar.MenuItems.Add(new ApplicationBarMenuItem("Home"));
appBar.MenuItems.Add(new ApplicationBarMenuItem("Help"));
appBar.MenuItems.Add(new ApplicationBarMenuItem("About"));
this.ApplicationBar = appBar;

3. Adding Icon Button to Application bar

If you would like to add an icon button instead of(or in addition to) to MenuItems of Application Bar. Basically, you have to options to do so: in code or in XAML. For the first option you simply need to add C# code bellow to your class (I am using ApplicationIcon.png that comes with a new project creation, you can use any other image as icon):


ApplicationBar appBar = new ApplicationBar();
appBar.Opacity = 0.7;
appBar.Buttons.Add(new ApplicationBarIconButton() { IconUri = new Uri("/ApplicationIcon.png", UriKind.Relative), Text = "my first icon button" });
this.ApplicationBar = appBar;

Another option is to create same icon button in XAML:


<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar x:Name="globalApplicationBar" Opacity="0.7">
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton IconUri="/ApplicationIcon.png" Text="my first icon button" />
        </shell:ApplicationBar.Buttons>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Result will look like that:

4. Adding a click event to Application bar item

To implement some functionality for application bar item click event you need to assign a click event for each of items(icon button or menu item). That can be done again in both: XAML and source code. Click event is fired every time user pushes a specific menu item or button in application bar. In XAML assigning a click event to application bar item (icon button in my case) will look like that:


<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar x:Name="globalApplicationBar" Opacity="0.7">
      <shell:ApplicationBar.Buttons>      
         <shell:ApplicationBarIconButton IconUri="/ApplicationIcon.png" Text="my first icon button" Click="ApplicationBarIconButton_Click"  />
      </shell:ApplicationBar.Buttons>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Method for handling an event can be implemented in source code too:


ApplicationBar appBar = new ApplicationBar();
appBar.Opacity = 0.7;
ApplicationBarIconButton iconButton = new ApplicationBarIconButton() { IconUri = new Uri("/ApplicationIcon.png", UriKind.Relative), Text="my first icon button"  };
iconButton.Click += new EventHandler(ApplicationBarIconButton_Click);
appBar.Buttons.Add(iconButton);
this.ApplicationBar = appBar;

Last thing that is left is to add a functionality within a method handling click event(in my case it is ApplicationBarIconButton_Click):


private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
   // add your functionality here
}

5. Adding both types of menu items

Finally, you can add both types of items to an application bar: MenuItems and IconButtons. As usually, it can be done within C# code or XAML. I will show how to add those types in XAML in following example (MainPage.xaml file):


<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar x:Name="globalApplicationBar" Opacity="0.7">
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Home" />
            <shell:ApplicationBarMenuItem Text="Help" />
            <shell:ApplicationBarMenuItem Text="About" />
        </shell:ApplicationBar.MenuItems>
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton IconUri="/ApplicationIcon.png" Text="my first icon button" Click="ApplicationBarIconButton_Click"  />
        </shell:ApplicationBar.Buttons>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

The result will look like that:

eugenedotnet windows phone 7 application bar