Creating an Application Bar - Page 3
by kirupa |  19 September 2010

  Have questions? Discuss this Windows Phone tutorial with others on the forums.

In the previous page, you learned all about the ApplicationBar Button. In this page, we'll learn about its younger sibling, the ApplicationBar MenuItem.

Adding an ApplicationBar MenuItem
The other type of content that lives inside the ApplicationBar is the MenuItem which appears below your Buttons when you tap or drag up on the dots:

[ much like a troll under a bridge, the MenuItems live below the Buttons ]

You add each ApplicationBar MenuItem (properly known as ApplicationBarMenuItem) just like you would add an ApplicationBar Button. Right click on the ApplicationBar icon in your Objects and Timeline panel and select Add ApplicationBarMenuItem from the menu that appears:

[ this should look familiar! ]

Once you have selected Add ApplicationBarMenuItem, you will see the newly created MenuItem appear both in your Objects and Timeline panel under the MenuItems node as well as on your artboard:

[ you see your MenuItem on the artboard ]

The only thing that you would really want to change with the MenuItem is the text that appears. To change the text, make sure the MenuItem is selected and modify the Text property visible in the Properties Inspector:

[ the Text property controls what your MenuItem displays ]

That's all there is to it when it comes to adding and modifying a MenuItem. Besides it missing the icon property, it is almost identical to the ApplicationBar Buttons in how you use it inside Expression Blend.

Doing Something on a Tap/Click
Up until now, you've learned how to create and modify the looks of an ApplicationBar, ApplicationBar Buttons, and ApplicationBar MenuItems. The next thing we will look at is the very important task of making either the Button or a MenuItem do something when it is tapped.

To do this, what we are going to do is associate the Click event exposed by a MenuItem or Button to an event handler. Make sure to select either a MenuItem or a Button, and click on the Events tab in your Properties Inspector:

[ the Events tab displays all events your selected element exposes ]

Once you have clicked the Events tab, the Click event will be displayed with a text field where you can enter the name of the event handler to call:

[ you only have the Click event to work with ]

If you give an event handler name and press Enter, you will be taken to code view with the event handler created for you:

private void CallBono(object sender, System.EventArgs e)
{
// TODO: Add event handler implementation here.
}

Behind the scenes, the Click event has been wired up with the event handler you see above. When you tap on the Button or MenuItem whose Click event you just associated with the event handler, the code in the event handler will execute.

Conclusion
We often talk about how building applications for the Windows Phone is really no different from building applications for the web or desktop. A lot of tribal knowledge, tips/tricks, and code can be ported easily among all platforms. There are a few things that set the Windows Phone platform apart, and the functionality that revolves around the ApplicationBar is one of them.

One of the things you should keep in mind is that the ApplicationBar is not really a Silverlight control. It isn't even a DependencyObject. It is merely a wrapper for the underlying ApplicationBar the low-level platform exposes. This means that things that you may have come to love and expect such as data binding, accessing the contents by name, etc. will not work or work predictably. So, on that happy note, see you all later!

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.

COMMENTS

1 | 2 | 3




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.