Jerry Nixon @Work: Mango Sample: The ApplicationBar’s Secret Blend?

Jerry Nixon on Windows

Wednesday, January 18, 2012

Mango Sample: The ApplicationBar’s Secret Blend?

imageA Windows Phone application is made up of a frame and pages. The Pages are made up of XAML that define the UI and the Application Bar. The Application Bar is made up of Application Bar Icon Buttons and Menu Items.

MSDN: The default Application Bar is a row of icon buttons and an ellipsis along the bottom of the phone’s screen. The user can click the ellipsis to display the labels for the icon buttons and menu items if they are enabled. The Application Bar has built-in animation that is displayed as the menu is shown or hidden. Also, the Application Bar automatically adjusts when the phone changes orientation. When the phone is in landscape orientation, the Application Bar appears on the side of the screen vertically. This maximizes the remaining space for page content.

Icon Buttons

App Bar expanded without menu items

The Application Bar is a row of icon buttons along the bottom of the phone’s screen.

  • Icon images should be 48 x 48 pixels in size.

  • Icon images should fit in a 26 x 26 area, not overlapping the circle.

  • The circle is drawn by the Application Bar and should not be included in the image.

  • Icon images should use a white foreground on a transparent background.

  • Windows Phone automatically colors the icon according to the theme selection.

  • Keep Icon Button labels as short as possible. Text may be truncated.

  • Choose icons with clear meanings.

Menu Items

App Bar expanded with menu items

In addition to the icon buttons, you can add one or more text-based menu items. These items are displayed in a list that slides up from underneath the icon buttons when the user clicks the ellipsis. The menu items are used for application actions that are less frequently used, or for actions that are difficult to convey with only an icon.

Creating in Visual Studio

In the following video, I walk through how to create an Application Bar in Visual Studio.

Unable to display content. Adobe Flash is required.

Creating in Expression Blend

In the following video, I walk through how to create an Application Bar in Expression Blend.

Unable to display content. Adobe Flash is required.

Conclusion

Expression Blend is really cool magic in the developers tool belt.

Best of luck!