CODEWITHSUNDEEP
windows-8winrt-xamlwindows-store-apps
Mina Wissa
Mina Wissa

Reputation: 10971

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

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 &#xE158; mean? Is there any refernece to the built-in icons ?

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

Upvotes: 2

Views: 4929

Answers (3)

Richard Garside
Richard Garside

Reputation: 89240

The hex value &#xE158; 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.

Upvotes: 0

Jawahar
Jawahar

Reputation: 4885

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.

enter image description here

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

Upvotes: 1

Frank Pfattheicher
Frank Pfattheicher

Reputation: 432

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

See a list of symbols in LIST OF BUTTON SYMBOLS

Upvotes: 6

Related Questions