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:

Window-Phone-1.jpg
                            
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:

Window-Phone-2.jpg

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:

Window-Phone-3.jpg  

And second:

Window-Phone-4.jpg
 
For now it looks like:       

Window-Phone-5.jpg                  

In Windows Phone, you will get this:

Window-Phone-6.jpg

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:

Window-Phone-7.jpg
                                              
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":

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

Window-Phone-9.jpg

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:

Window-Phone-10.jpg
                            
Do the Same for the Menu:

Window-Phone-11.jpg

Change the Text property:

Window-Phone-12.jpg
                             
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).

Window-Phone-13.jpg

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

Window-Phone-14.jpg

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

Same for the "About Menu",

Window-Phone-15.jpg

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.

Up Next
    Ebook Download
    View all
    Learn
    View all