Technical  /  Tutorial  /  Version: RC  /  XAML

Video Demo: Working with the XAML AppBar in Blend and VS 2012

AppBars provide the user with easy access to commands when required. The user can swipe up from the bottom edge of the screen to make app bars appear and can interact with their content to make app bars disappear. App bars can also be used to show commands or options that are specific to the user’s context.

Keep the Windows design guidance for app bars in mind any time you are working with them.  There is a complete set of Guidelines and Checklist for app bars published on the Windows Developer Center.  Those guidelines include:

  • Place commands consistently and organize them to coherent sections.
  • Place contextual commands on the app bar (except clipboard operations).
  • Design the AppBar for Application View States like Snapped & Filled.
  • Use the bottom app bar for commands and top app bar for navigation.
  • Do not place critical commands on the App Bar.

The XAML Designer in Blend & VS enables you to intuitively design XAML AppBar controls and content. Check out the video below to see how to design a XAML AppBar in Blend for Visual Studio, which is similar to the one in the Music App in Windows 8 Consumer Preview.

Video demo:  How to create a XAML AppBar

More Resources

Guidelines and checklist for app bars  in the Windows Dev Center goes in to more detail on the UX guidelines for AppBar.

Official Windows SDK XAML AppBar control sample

Tim Heuer’s Blog on AppBar button styles and his updated Standard Styles defines the 150 different AppBar button styles.

Thanks,

Harikrishna Menon Ajith Kumar, Blend PM