|
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.
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.
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.
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!
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use

Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|