Creating app bar buttons in WinRT

If you start a new blank Windows 8 App in Visual Studio you get loads of app bar button styles to choose from in StandardStyles.xaml including:

SkipBackAppBarButtonStyle, SkipAheadAppBarButtonStyle, PlayAppBarButtonStyle, PauseAppBarButtonStyle, EditAppBarButtonStyle, SaveAppBarButtonStyle, DeleteAppBarButtonStyle, DiscardAppBarButtonStyle, RemoveAppBarButtonStyle, AddAppBarButtonStyle, NoAppBarButtonStyle, YesAppBarButtonStyle, MoreAppBarButtonStyle, RedoAppBarButtonStyle, UndoAppBarButtonStyle, HomeAppBarButtonStyle, OutAppBarButtonStyle, NextAppBarButtonStyle, PreviousAppBarButtonStyle, FavouriteAppBarButtonStyle, PhotoAppBarButtonStyle, SettingsAppBarButtonStyle, VideoAppBarButtonStyle, RefreshAppBarButtonStyle, DownloadAppBarButtonStyle, MailAppBarButtonStyle, SearchAppBarButtonStyle, HelpAppBarButtonStyle, UploadAppBarButtonStyle.

If that list doesn't quite cover you then it's really easy to create a metro button style that will. The easiest way is to create a style based on AppBarButton and to use an icon from the font Segoe UI Symbol. The advantage of using a font is that it is automatically scaleable. Segoe UI Symbol has a lot of symbols for you to choose from and is the font used by AppBarButtonStyle, which we are basing our style on. You can use Character Map to find a good one, or I've included some of my favourites at the end of this post.

Here is my style for a crop button. Include this style in a resource dictionary that will be accessible to all the xaml files that need it:

<Style x:Key="CropAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
 <Setter Property="AutomationProperties.AutomationId" Value="CropAppBarButton"/>
 <Setter Property="AutomationProperties.Name" Value="Crop"/>
 <Setter Property="Content" Value="&#x25F0;"/>
 </Style>

The text in bold is the text you need to change to make different sorts of buttons. The Content property contains the hex unicode value for the font character you want to use as your icon. I wasn't aware of an accepted standard for a crop icon, so I found one that I thought worked pretty well.

To use this style on your button you just x like this:

<Button x:Name="Crop" Style="{StaticResource CropAppBarButtonStyle}" Click="OnCropButtonClick"/>

Here is a table including most of the Segoe UI Symbols that you're likely to find useful:

Andrew Ames said

Just use the "Character Map" utility in Windows, change the font to Segoe UI Symbol and boom you have them all there. As well as the character codes which are the 4 digit codes you add after the &#x in your examples above.

Richard Garside said

@Andrew I've found the character map a bit small. I've updated the symbol table above to include more symbols. Hopefully it will be more useful now.

Robert J. Good said

Worked great, thanks for the help!

Rahul said

Very useful and awesome post. Thanks for the post