Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Windows 8 App bar buttons Icons in Xaml

with 2 comments

Many developers ask about App bar button styles and how we can get new styles ? one of the most amazing tools for this is Metro Studio but I’m not going to discuss it today. today I’ll explain a very simple common approach to get new Icons for you app bar buttons.
Let’s now take a look about the common button App bar styles in standardStyles.xaml in the common folder
xaml

In the Value of Content property of the SkipBackAppBarButtonStyle is &#xE100 what is this hex Digits ??
It is the Segeo UI Symbol Characters. And to get more characters open the Character Map in your Device

Char Map

At the end of the char. map you’ll find the hex digits of the symbol. Now choose a character and copy it’s hex digits

 <Page.Resources>

            <Style x:Key=”New” TargetType=”Button” BasedOn=”{StaticResource AppBarButtonStyle}”>

                <Setter Property=”AutomationProperties.AutomationId” Value=”HomeAppBarButton”/>

                <Setter Property=”AutomationProperties.Name” Value=”Home”/>

                <Setter Property=”Content” Value=””/>

            </Style>

    </Page.Resources>

Replace the value of the content property with the hex digits you have as in the below code then add a button on you app bar and style it with your new Icon the run the project and enjoy your new Icon

2056910448_thanks_xlarge

Ibraheem Osama Mohamed
@IbraheemOsamaMo

Advertisements

Written by Ibraheem Osama Mohamed

February 11, 2013 at 1:01 pm

Posted in Windows 8

2 Responses

Subscribe to comments with RSS.

  1. It’s an amazing article for all the online people; they will obtain benefit from it I am sure.

    sam goldsmith

    May 23, 2013 at 6:07 pm

  2. Hey,

    cool article. I just run over that app here: http://www.devitep.de/Apps/XamlIcons

    Seems to do similar things.

    Maybe this is useful for somebody

    John

    John

    May 29, 2013 at 4:43 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: