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:
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="♫" />
<Setter Property="AutomationProperties.Name" Value="
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):
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”.