Walkthrough: The Windows 8 AppBar, you might as well have the coolest! (feat. Expression Design)

Windows 8 apps don’t have a ribbon. Windows 8 apps don’t have a top menu. Instead, Windows 8 apps have AppBars. An AppBar on the bottom of your app is where you place command buttons. An AppBar on the top of your app is where you place navigation elements.

MSDN: An app bar is a UI element that presents navigation, commands, and tools to the user. An app bar can appear at the top of the page, at the bottom of the page, or both. It is hidden by default, and is shown or dismissed when the user right clicks, presses Windows+Z, or swipes from the top or bottom edge of the screen.

You can open and close the app bar programmatically by setting the IsOpen property. You can respond to the app bar being opened or closed by handling the Opened and Closed events.

By default, the app bar is dismissed (closed) when the user interacts with the app anywhere outside of the app bar. Closing the app bar this way is called light dismiss. You can control how the app bar is dismissed by setting the IsSticky property. When the app bar is sticky, it's not closed by a light dismiss gesture. The app bar remains visible until the user right clicks, presses Windows+Z, or swipes the top or bottom edge of the screen.

To add an app bar in Extensible Application Markup Language (XAML), you assign an AppBar control to a Page's TopAppBar orBottomAppBar property. A single app bar can be shared across multiple pages. You can add and remove commands programmatically based on the page context.

The Windows Store app templates in Microsoft Visual Studio 2012 and Blend for Microsoft Visual Studio 2012 for Windows 8 contain a variety of app bar button styles for common scenarios in the StandardStyles.xaml file. To create a custom app bar button, use these styles as a guide to create a new style for your button.

Let’s take a minute to style our AppBar

Microsoft Expression Design 4 is part of the Microsoft Expression 4 Suite. It’s my favorite tool to create vector-based images that I can use in my XAML applications. In the video below, I’ll show you how to create a simple, stylized AppBar in your Windows 8 app.

Fun huh?

Best of luck!