Listen to this

August 18, 2012 AEST — By Long Zheng

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.

8 comments

  1. Jason Moore says:

    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.

  2. Sandra Walters says:

    Hey, thanks for putting the app out for others to share. It’s quite helpful.

  3. Bret Anderson says:

    That’s really cool! I’m sure I’ll find this helpful in the not too distant future.

  4. Jaymelbe says:

    OOh thank you so much !!! I have found something like this a few months ago but I was not able to find the site now… that’s so helpful !
    By the way, do you know that you can create yours easily ? By using the code of the Segoe UI Symbol… (see: http://csharperimage.jeremylikness.com/2012/03/windows-8-icons-segoe-ui-symbol.html)

  5. Filip Skakun says:

    The Styles Browser app in the WinRT XAML Toolkit also provides some of that functionality.

    http://bit.ly/WinRTXamlToolkit

  6. folosey says:

    Thanks!!! This is useful information for me.

  7. elsemaani says:

    Thanks, I was thinking to do something like this, you save me some work!

  8. Vincent says:

    The link C# source code on MetroTwit’s GitHub. seems to be dead

    I found another link :
    https://github.com/pixeltucker/MetroAppBarSample

Leave a Reply