Jul 232012
 
 July 23, 2012  Posted by at 12:41 am Uncategorized, WinRT  Add comments

Not sure if you have noticed, but there are quite a few out of the box icons for buttons that come with Metro. I’ve put them all on one page here so you can see them, and the name of the style 🙂 The styles are found in the common folder, in the Standardstyles XAML file.

EDIT: I probably should have mentioned that the icons are Segoe UI Symbols, edited in a style that is predefined for you. So you can of course edit them, or add more. There are quite a few symbols to choose between! Here are the icons already defined for you:

Icons defined by default

[sourcecode language=”XML”]
<Page
x:Class="ButtonStylesMetro.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonStylesMetro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<StackPanel>
<Button Style="{StaticResource SkipBackAppBarButtonStyle}"></Button>
<Button Style="{StaticResource SkipAheadAppBarButtonStyle}"></Button>
<Button Style="{StaticResource PlayAppBarButtonStyle}"></Button>
<Button Style="{StaticResource PauseAppBarButtonStyle}"></Button>
<Button Style="{StaticResource EditAppBarButtonStyle}"></Button>
<Button Style="{StaticResource SaveAppBarButtonStyle}"></Button>
</StackPanel>
<StackPanel>
<Button Style="{StaticResource DeleteAppBarButtonStyle}"></Button>
<Button Style="{StaticResource DiscardAppBarButtonStyle}"></Button>
<Button Style="{StaticResource RemoveAppBarButtonStyle}"></Button>
<Button Style="{StaticResource AddAppBarButtonStyle}"></Button>
<Button Style="{StaticResource NoAppBarButtonStyle}"></Button>
<Button Style="{StaticResource YesAppBarButtonStyle}"></Button>
</StackPanel>
<StackPanel>
<Button Style="{StaticResource MoreAppBarButtonStyle}"></Button>
<Button Style="{StaticResource RedoAppBarButtonStyle}"></Button>
<Button Style="{StaticResource UndoAppBarButtonStyle}"></Button>
<Button Style="{StaticResource HomeAppBarButtonStyle}"></Button>
<Button Style="{StaticResource OutAppBarButtonStyle}"></Button>
<Button Style="{StaticResource NextAppBarButtonStyle}"></Button>
</StackPanel>
<StackPanel>
<Button Style="{StaticResource PreviousAppBarButtonStyle}"></Button>
<Button Style="{StaticResource FavoriteAppBarButtonStyle}"></Button>
<Button Style="{StaticResource PhotoAppBarButtonStyle}"></Button>
<Button Style="{StaticResource SettingsAppBarButtonStyle}"></Button>
<Button Style="{StaticResource VideoAppBarButtonStyle}"></Button>
<Button Style="{StaticResource RefreshAppBarButtonStyle}"></Button>
</StackPanel>
<StackPanel>
<Button Style="{StaticResource DownloadAppBarButtonStyle}"></Button>
<Button Style="{StaticResource MailAppBarButtonStyle}"></Button>
<Button Style="{StaticResource SearchAppBarButtonStyle}"></Button>
<Button Style="{StaticResource HelpAppBarButtonStyle}"></Button>
<Button Style="{StaticResource UploadAppBarButtonStyle}"></Button>
<Button Style="{StaticResource PinAppBarButtonStyle}"></Button>
</StackPanel>
<StackPanel>
<Button Style="{StaticResource UnpinAppBarButtonStyle}"></Button>
</StackPanel>
</StackPanel>
</Grid>
</Page>
[/sourcecode]
But there are more symbols to choose between! I’ve explained and shown how to view and add them here

  8 Responses to “Example Metro app /WinRT: Out-of-the-box Icons for Buttons (XAML)”

  1. […] use it inside a HTML Metro application, simulating a simple custom countdown control…”Example Metro app /WinRT: Out-of-the-box Icons for Buttons (XAML) (Iris Classon)“Not sure if you have noticed, but there are quite a few out of the box icons […]

  2. […] Read original post at Iris Classon's Blog […]

  3. Basically this all are “Segoe UI Symbol” fonts, you can make your icons. Check character map utility to find desired icon. I have used those symbols in my metro app called

  4. Farhan: Good comment, I probably should have mentioned that! I’ve seen many that will create their own icons, and wanted to make sure that people knew that quite a few are already pre-defined icons ( ‘icons’)- assuming people would be able to edit the style/symbols as needed.

    But, I do agree that it is better to explain into details sometimes,- and this is an important detail 🙂

    Thank you very much for the comment, comments like this helps me become better att showing/teaching/writing , and also helps readers! So I’ll gladly take more tips/comments/feedback 🙂

  5. I was looking for the icons they usually include in VS to no avail (according to MSDN they’re supposed to exist still but they weren’t in the RTM version I installed), Ths post was very helpful, I didn’t realize Segoe UI had most of what I needed until I stumbled on this. Thanks for sharing the post and the XAML example.

  6. Hi Iris, shortly after your post a whole bunch of other icons were added to the StandardStyles and a guy did the work to display them all the same way you did. Since your image is the one that shows up on google searching for “StandardStyles WinRT”, I thought it might be worth mentioning.

    You can find it here -> http://www.istartedsomething.com/20120818/dev-windows-8-standard-appbar-button-styles/

    T.

  7. Hi Iris,

    it’s quite a while ago that you wrote this article here. Maybe I can contribute something to the topic. I just found that app here: http://www.devitep.de/Apps/XamlIcons , that helped me really a lot. Offers over 10.000 XAML Icons.

    Great to extand the standard MS icon set.

    Greetings

    Sebastian

    • Hi,
      Thank you for that, appreciate it!
      Let me know if there is anything else.

      With kind regards Iris Classon

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 4 + 10 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)