Application Bar in Windows Phone

Introduction

If you have used Windows Phone then you must be familiar with the Application Bar. In other words, the Bottom Bar that is shown in most applications. Or, you can see in this given image:


                            
Background

You can use it in any type of page; it may be a simple Portrait, Pivot or Panorama. Generally, it is for user convenience, so they can get their Menus and Icons easily.

So, let your hands get dirty with the Application Bar.

Procedure

Step 1: Start with the simple Portrait Page. If you have, then navigate your mouse to the bottom of the code in the XAML window.

There you may get this:



And, this is the actual code of the Application Bar that is commented. And, by default the Application Bar is out of context.

So, first remove the Comment Sign from the code.

First:

  

And second:


 
For now it looks like:       

                  

In Windows Phone, you will get this:



That is an un-processed Application Bar.
 
Step 2: Add a few ICONS for the Application Bar.

And, you will get this from:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

Note: C is my ROOT drive, you may have a different one.

I have added two Icons; they are:


                                              
Appbar.cancel.rest.png and appbar.check.rest.png

Note: Keep in mind that the Icon must be of Content type.

So, check in the "Property Window":


                                  
Do this for both Icons. By default, your Icon may be Resource Type.
 
Now, add these Icons to the code.



At most, you can add Four Icon Button in your Appbar.

Here, we will add two, so change the IconUri in the XAML code.

I have:

/Icons/Appbar.check.rest.png and /Icons/Appbar.cancel.rest.png

And it looks like:


                            
Do the Same for the Menu:



Change the Text property:


                             
If you click on the marked Dot (…) then it pops up the Application Bar that shows the Menu Items.

And, it's a great idea, if you keep three App Icons and three Menus in your Application Bar.
                                              
Step 3: Now, we code the Click event, that will do something on a Click.

So add Click to XAML and the corresponding event name (user defined).



Here, "ApplicationBarIconButton_Click" is the Event. Now, in the .cs file we code the actual Event.



Here, I have added a Message Box that will pop up on a click.

Same for the "About Menu",



Do that for all the Icons and Menues in your App Bar.

There, you may put anything, whatever you want. It may be Navigation or anything.
 
Conclusion

You may develop a Home Portrait for an App or any specific something, most probably you need the Application Bar.

It's a good idea if you put less than three menus and icons in the Application Bar.

There are a few properties, like opacity, background color and minimization that you can discover yourself.