Windows 8 dev: standard AppBar button styles

Windows 8 standard AppBar button styles

While designing and developing MetroTwit for Windows 8, I grew very close to StandardStyles.xaml (BFF) – one of the files Visual Studio 2012 automatically pre-populates for a Metro-style application.

The resource file provides some of the core and standardized XAML control styles for a consistent Windows 8 app user experience. In the RTM version of Visual Studio released earlier this week, StandardStyles was updated to provide a more comprehensive dictionary of AppBar button styles. It grew from tens to hundreds.

As a designer, it was very hard to visualize just what the AppBar icons looked like so I decided to come up with a simple way to visualize them.

With the help of Rafael Rivera, I made a Metro app which loads StandardStyles, reads the XML, filters out just the AppBarButtonStyles and then spits them out into a grid so you can see them all at once, with their names available on hover.

Since this would be pretty handy to other Metro developers as well so I’ve put the C# source code on MetroTwit’s GitHub.

12 insightful thoughts

  1. That’s pretty neat. I never knew they updated the StandardStyles to include more AppBarButtonStyles. I’ll need to update mine.

    One thing I found useful for generating more app bar buttons was the Character Map, under the font family “Segoe UI Symbol”. The character map gives you the hex code which you can then use in button style. There are tonnes of symbols in that font family. They must have turned a lot more of them into AppBarButtonStyles for us.

Leave a Reply