Windows Store Apps: Change the icon of an AppBar Button?

Question

I want to change the icon of an AppBar Button in my Windows Store app.

I found that the AppBar buttons have XAML markup that looks like this:

<Style x:Key="PicturesAppBarButtonStyle"
       TargetType="ButtonBase" 
       BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId"
            Value="PicturesAppBarButton"/>
    <Setter Property="AutomationProperties.Name" 
            Value="Pictures"/>
    <Setter Property="Content" Value="&#xE158;"/>
</Style> 

What does the content value  mean? Is there any refernece to the built-in icons ?

Also how can I display a different icon of my own ?

Answer 1

The Content is the Unicode character number for the used font "Segoe UI Symbol" .

See a list of symbols in LIST OF BUTTON SYMBOLS

Answer 2

You can use CharacterMap to pick icons other than defined in StandardStyles.xaml. The character map gives you the hex code which you can then use in button style. There are tonnes of symbols in Segoe UI Symbol.

In case of if you want to use Image or Path, then you have to re-edit some visual states in the style.

Answer 3

The hex value  is a symbol in the Segoe UI font. This is the symbol shown in the center of the button.

I've written a blog post on how to create your own app bar button that includes a reference of Segoe UI symbols you can use, along with their hex values.