Mobile Zone is brought to you in partnership with:

Jerry Nixon is the Microsoft Developer Evangelist in Colorado. He has scary knowledge about Architecture, XAML, and SQL Server. He has terrifying knowledge about Windows Phone, the Kinect, and C#. And, he has simply ridiculous knowledge on Windows Desktop development in Windows 8. Jerry is a DZone MVB and is not an employee of DZone and has posted 104 posts at DZone. You can read more from them at their website. View Full User Profile

Walkthrough: The Windows 8 AppBar

10.16.2012
| 3268 views |
  • submit to reddit
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.

<a href="http://www.omniture.com" title='Web Analytics'><img alt='' border='0' height='1' src="http://mssto.112.2o7.net/b/ss/msstoextblogsnojs/1/H.20.2--NS/0" width='1' /></a>

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!

 

 

 

Published at DZone with permission of Jerry Nixon, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)