The Application Bar in Windows Phone
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:
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:
I am going to drag and drop them into the created Images Folder in my Solution Explorer:
Now I select them both and change the Build Action from Resource to Content:
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:
So, I remove those comments, and that lets me see the Application Bar in my designer surface:
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:
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:
When I run it now, it displays the images and when I click the ellipsis button it also displays the menu options:
Of course I want something to actually happen when one of the icons is clicked:
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…