Although designing an application using Blend should be
similar whether you are building a traditional XAML application or a
Windows Phone application, some things are applicable only to the phone.
These include the ApplicationBar, the Panorama control, the Pivot control, and launching the emulator.
1. The ApplicationBar in Blend
Although having a user interface that compels users to move, swipe,
and pan their way to getting the most from your application is nice,
sometimes users need simple operations. This is where the ApplicationBar comes in. The ApplicationBar is a standard part of many applications. A mix of a menu and a toolbar, the ApplicationBar can hold both icons (like a toolbar) and menu items. The ApplicationBar starts in a minimized (or closed) state and can be opened by the user to reveal more information, as shown in Figure 1.
Figure 1. ApplicationBar explained
By default, the ApplicationBar takes up a small portion of the user interface (labeled #1 in Figure 1). On the ApplicationBar
are icons that can perform certain tasks. In this mode only the icons
are visible; the menu items are not. You can see the icons in the ApplicationBar (#2). To the right of the icons is an ellipse (#3) that alerts the user that pressing it will open the ApplicationBar
(#4). In this open view, the menu items are shown below the icons (#5).
Finally, you should notice that, when opened, the icons have text
associated with them (this is not visible when closed but is shown when
the application bar is opened, as shown in #6). In this example, all the
text is lowercase. The ApplicationBar forces any text in the menu items or icon text to be lowercase (to preserve the Metro-style guide).
You can add an ApplicationBar to a XAML file with the context menu on the PhoneApplicationPage element in the Objects and Timeline panel, as shown in Figure 2.
Figure 2. Adding an ApplicationBar
This adds the bar to your application as just another part of your
object tree. From that point, you can use the context menu to add both
icons and menu items, as shown in Figure 3.
Figure 3. Adding items to the ApplicationBar
Adding an ApplicationBarIconButton creates the icons you
see on the bar (whether closed or opened). Blend supports a number of
built-in icons you can choose, or you can supply your own. With an ApplicationBarIconButton selected in the Objects and Timeline panel, you can use the drop-down to pick an icon to use for your application, as shown in Figure 4.
Figure 4. Selecting a built-in icon for an ApplicationBar icon
Selecting a built-in icon will add that icon to your project (in an Icons folder). You can simply supply your own IconUri
to point to an icon of your choosing (located in your project). The
built-in icons are useful, but be careful not to reuse a built-in icon
for a use that is not natural. It will confuse users if you reuse an
icon that is commonly used for some other function.
Typically, these should follow the Metro style and be
monochrome (for example, white on black or black on white) in the PNG
format. If you choose white with PNG transparency, Windows Phone will
change your icons to black on white when the user switches his theme to a
light theme. Otherwise, you will need to modify the icon at runtime
manually.
