|
by
kirupa | 19 September 2010
Have questions? Discuss this Windows Phone tutorial
with others on the forums.
In the
previous page you learned what an ApplicationBar
is and how to add one to your page. In this page,
let's delve a little deeper and look at how to add
ApplicationBar Buttons to the ApplicationBar you
have created.
The ApplicationBar Button (known
internally by its enemies as ApplicationBarIconButton) is the circular outline
with an icon that is prominently visible when a page
with an ApplicationBar is displayed:
[ say hello to your ApplicationBar Buttons! ]
Initially, only the ApplicationBar icons would be
visible, but a text label will appear when you
interact with the dots:
[ the text labels are never shown by default ]
To add an ApplicationBar Button, right click on
the second ApplicationBar node in your Objects and
Timeline panel and select Add
ApplicationBarIconButton:
[ right click on the ApplicationBar to add a Button
for it ]
Once you have done this, an
ApplicationBarIconButton will be added to your
ApplicationBar in the usual places in your Objects
and Timeline panel and the design surface. Since the
design surface is more interesting, here is a
screenshot of that:
[ an empty ApplicationBar Button is displayed ]
You will now see an ApplicationBar Button that is
both lonely and empty on the inside with its only
friend being some generic text. Let’s give it a
reason to live by setting an icon image and changing
its default text. Both can be done via the
properties visible for this on the Properties
Inspector:
[ the two properties we care about are the
icon and text label ]
To change the icon, click on the drop-down next to
the IconUri property. A menu will appear with a list
of common icons that you can use:
[ a list of icons installed by the Windows Phone SDK
will appear ]
Select any icon you want from this list. Once an
icon has been selected, it will be applied to your
ApplicationBar Button, and the icon will be added
locally to your project.
Here is what your ApplicationBar Button looks
like right now:
[ your ApplicationBar Button is slowly taking shape
]
The icon you used is added to an icons directory
at the root of your project:
[ an icons directory houses any ApplicationBar icons
you use ]
If you want to use your own icon that is
different from the ones provided by the Windows
Phone SDK, you can click on the … button and browse
for the icon you are interested in:
[ you can always use your own icons as well ]
Do keep in mind the guidelines for ApplicationBar
Button icons. The icons must be 48x48 sized PNG
files with a transparent background and a flat-white
colored design. The consistency gods will smite you
if you deviate from that with your custom icons.
I should warn you that this part is not as
interesting as setting the icon. To change the text
that gets displayed, make sure your ApplicationBar
Button is selected and change the value of the Text
property in your Properties Inspector:
[ the Text property defines the text that is
displayed ]
Once you made your change, you will see your text
appear below the ApplicationBar Button:
[ w00t. your text now appears ]
Try to keep your text fairly short in length. If
your text is too long, characters will get clipped.
Since there is no good way to know how much space
your characters will take up in the non-fixed-width
font that is used, you’ll have to visually gauge the
length of the text to make sure everything is cool.
Note
One thing to keep in mind is that you can only have,
at most, four ApplicationBar Buttons in
your ApplicationBar. Expression Blend will
prevent you from adding any more once your fourth
ApplicationBar Button hits earth.
We have just finished
up our look at the ApplicationBar Button. Let's
focus our attention next to the MenuItems!
Onwards to the
next page!
|
