Mobile Zone is brought to you in partnership with:

I am a mother of four kids with a passion for languages, writing and programming. I try to cover everything a beginner should know. After all, I am a beginner. If there is anybody out there, thinking I missed something, or if somebody wants other topics, please feel free to contact me. Andrea is a DZone MVB and is not an employee of DZone and has posted 28 posts at DZone. You can read more from them at their website. View Full User Profile

The Application Bar in Windows Phone

01.29.2012
| 2893 views |
  • submit to reddit

This post is about the Application Bar. It is similar to a menu. It has both icons at the very top and an ellipsis button, that when the user clicks it, it opens up and shows a number of textual menu options beneath it. A developer can use these to enact some operations on the given XAML page or navigate the user to a whole different area within the application. The choice is the developer’s.

The Application Bar stays mostly hidden. It stays out of the way of the basic usage of the application. But when the user needs those extra options, they can be easily retrieved through that ellipsis button.

Let’s get right into that. I’ve created a new project. And the first thing I am going to do is define a folder that’s going to hold my icons:

1

I am going to call that folder “Images”. The next thing is going to the Windows Explorer and navigate to find some images that are already on my hard drive. When I installed Visual Studio 2010 Express for Windows Phone the SDK for Windows Phone 7 was installed as well. That SDK has a number of icons that I can use. They are themed for the phone. If you are on a 64 bit OS you’ll find them in the “Program Files (x86)” folder, if you are on a 32 bit OS like I am you’ll find them in the “Program Files” folder. In that folder I find the subfolder “Microsoft SDKs” and its subfolder “Windows Phone”, and again its subfolder “v7.0”. There I can find the subfolder “Icons”, and there I am going to choose the subfolder “dark”. There is a number of png files that have been created as icons that are properly sized for the Application Bar in my application. I am going to pick the “minus” and the “new” icon:

1a

I am going to drag and drop them into the created Images Folder in my Solution Explorer:

1b

Now I select them both and change the Build Action from Resource to Content:

1c

It is important to change this, because otherwise my application won’t find these images.

Ok, now that I have some images in my application, I simply need to reference them in my Application Bar.

I am going to my XAML code. There I see that by default an Application Bar was already created, it has just been commented out:

<!–<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>–>

 

So, I remove those comments, and that lets me see the Application Bar in my designer surface:

2

When I run this I can see two icons in my Application Bar but they both contain “x”. This happens when for whatever reason the applications can’t find a reference to those icons. When I click the ellipsis button it does display the menu options:

2a

All I had to do was to uncomment out the predefined Application Bar. And now I just need to change the references to some of the images.

Let’s move on and get my images included there. I am just going to edit the XAML directly:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton
            IconUri="/Images/appbar.minus.rest.png" Text="Remove"/>
        <shell:ApplicationBarIconButton
            IconUri="/Images/appbar.new.rest.png" Text="Add"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Contacts"/>
            <shell:ApplicationBarMenuItem Text="Calendar"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

 

When I run it now, it displays the images and when I click the ellipsis button it also displays the menu options:

3     3a

Of course I want something to actually happen when one of the icons is clicked:

  1.  
      <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton
                IconUri="/Images/appbar.minus.rest.png" Text="Remove"
                Click="ApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton
                IconUri="/Images/appbar.new.rest.png" Text="Add"
                Click="ApplicationBarIconButton_Click_1"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Contacts"
                  Click="ApplicationBarMenuItem_Click"/>
                <shell:ApplicationBarMenuItem Text="Calendar"
                  Click="ApplicationBarMenuItem_Click_1"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

So I’ve created an event for both the icons and the menu items. Now I just have to navigate to the event handlers, where I can do some important work and tell the application how to react when an icon is clicked or a menu item is chosen. For this blog entry I just leave it like this.

Notice: I only can define four icon bar buttons within my Application Bar, but I can define as many menu items as I want or need. This gives me a lot of flexibility with the number of commands that I want to allow for the user to use.

 

To be continued…

Source: http://andreahaubner.blog.com/2011/03/29/the-application-bar/

Published at DZone with permission of Andrea Haubner, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)