I have come across several developers that have asked how they get all those nice icons for the AppBar buttons.

For XAML

If you’re building your app using XAML, then the best way is to peruse the StandardStyles.xaml resource dictionary, found in the Common directory, to see if you can find one of the already defined buttons that fit your needs. Simple look through and find the style that will work for you and uncomment that section of XAML. Then, you can assign that style to your Button’s Style property using the “{StaticResource <style name>}” binding.

 

Example of a play button.

image

 

image

 

Overriding the text displayed

After you do this, you may notice that you can’t set the name that displays below the icon image.

image

Actually you can. If you look at the AppBarButtonStyle definition, then you’ll notice that the TextBlock that contains that text is bound to AutomationPropertites.Name. So, simply override that attached property on your button like this.

image

image

 

If anyone has any tips for WinJS developers, please let me know in the comments. Happy to share a link with the community.