Create Windows 8 RT/Metro Icons

Create Windows 8 RT/Metro Icons

I started developing my XBMC Remote for Windows 8 RT / Metro and I have come across a nice little feature in the API which I want to share. For Windows Phone, I had to create all the icons myself. Visual Studio 2012, creates a file called StandardStyles.xaml (in the folder “Common”) which contains a lot of predefined buttons for you. The following image shows all the predefined styles you can choose from:

[![All available AppBar button styles](/content/images/2012/08/appbar_large_thumb11.jpg "appbar_large")](/content/images/2012/08/appbar_large11.jpg)
**1. All available AppBar button styles**

To use one of these styles you can simply use the following bit of Xaml (replacing the highlighted word with the button you want):

<Button Style="{StaticResource RemoveAppBarButtonStyle}"/>

But, it gets even better, because you can use any icon of the “Segoe UI Symbol” set inside your metro app, without having to include your own icons. To do so, you need to create a style based upon the standard AppBarButtonStyle like this:

<Style x:Key="MusicAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}"> <Setter Property="Content" Value="&#x266B;" />
Setter Property="AutomationProperties.Name" Value=""/> </Style>

The value of the content setter determines which icon is shown. The value of the AutomationProperties.Name setter determines the text underneath the button.

For the icon, you can open the character map and look up the hex code. To open the character map, go to the start screen and type “character map”. Then click the first app that comes up (as shown in the screenshot below):

[![Screenshot showing how to open the character map on windows 8](/content/images/2012/08/char_map_thumb1.png "char_map")](/content/images/2012/08/char_map1.png)
**2. Screenshot showing how to open the character map on windows 8**

When you open the character map app, you have the select the “Segoe UI symbol” set. When you have this set available, you can browse through the icons. When you see an icon you like, you can hover it and it will show you the correct code.
From the code you strip out the “u+”-part and paste it into the content Setter as shown before. So in this case “U+266B” becomes “♫” where the code is “266B”.

[![How to obtain a hex code through the character map for use in Windows 8 styled apps](/content/images/2012/08/char_map_detail_thumb1.png "char_map_detail")](/content/images/2012/08/char_map_detail1.png)
**3. How to obtain a hex code through the character map for use in Windows 8 styled apps**
Kenneth Truyers
View Comments
Next Post

Unit testing: How to start writing effective tests

Previous Post

New Update for XBMC Remote for Windows Phone 7