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.
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.
Hey, thanks for putting the app out for others to share. It’s quite helpful.
That’s really cool! I’m sure I’ll find this helpful in the not too distant future.
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)
The Styles Browser app in the WinRT XAML Toolkit also provides some of that functionality.
http://bit.ly/WinRTXamlToolkit
Thanks!!! This is useful information for me.
Thanks, I was thinking to do something like this, you save me some work!
The link C# source code on MetroTwit’s GitHub. seems to be dead
I found another link :
https://github.com/pixeltucker/MetroAppBarSample
If you want to create your own buttons using other symbols from Segoe UI I wrote a blog post on how to do this along with a handy graphical Segoe UI reference:
http://www.nogginbox.co.uk/blog/app-bar-buttons-in-winrt