When you create a new Windows 8 application, the Common folder contains a file named StandardStyles.xaml. Amongst other styling resources, this file contains a trove of application bar buttons styles, including Microsoft Design-like icons.
In order to use these styles, however, you need to uncomment the corresponding one. Microsoft commented these styles out, because otherwise they would be instantiated by the XAML parser when the app starts, which would cause some delays and use unnecessary memory. That makes it a bit tricky to find the right button style you want to use for your app bar.
To make things a little easier, I made an app that you can download and run.
- Download the app packaged in a zip file.
- Right click on the zip file and select “Properties”.
- If the Unblock button is available in the Properties dialog, click it.
- Right click on the zip file again and select “Extract All”.
- In the extracted folder, find the SLN file and run it.
This app shows all the available button styles. It also offers the possibility to copy the style name to the clipboard (in order to paste it in your app) as well as the glyph used by the style.
The glyph is a code such as, for instance, “”. Because the button styles are using the FontFamily “Segoe UI Symbol” (which you can see in the AppBarButtonStyle element in the same file), this glyph will translate visually to an icon. For instance, the glyph mentioned here is the “Discard” glyph and looks like this:
When you run the app, you can swipe down to show the application bar and use the commands to copy either the style name or the glyph. Note that to use the style in your own app, you need to open the file StandardStyles.xaml, locate the style by its name and make sure that it is not commented out!
About the styles
The app bar button styles are defining not only the icon, but also the text that will be used for this button. If you inspect the styles, you will find that the AutomationProperties.Name attached property is used, rather than the Content property. This is because the AutomationProperties.Name will enable screen readers to work and to read the button’s caption out loud. Of course you can overwrite this caption at any time in the button itself of in a Style based on the button style you want to use.
Finally, note that you can of course use your own icons (images) in AppBar buttons styles but you will have to define your own control template for that (which is easy in Blend).
Using the predefined AppBar buttons styles has the big advantage to make your users feel comfortable with icons that they already know, and the design of these icons is completely right for Microsoft Store apps. The disadvantage is that they are not original creations (so they are less innovative).
I hope that this small app will be helpful for everyone. Note that I presented this app in my recent talk at TechDays Belgium and Netherlands, talk which can be seen in this blog post.
Happy coding
Laurent
