Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Icons
Not all developers are great designers. The Metro UI contains many rich graphics features and applications come standard with an application bar that gives the user access to various features. Context-specific features are grouped to one side, and more global features are grouped to the other side. You can see the example of an application bar for the standard weather application in Figure 1. Note the style of the icons and text to provide context for the user to decide which action to take.
){kind=link}
Example of the Application Bar
If you’re aesthetically challenged like me, it would be challenging to produce a clean, crisp icon like the ones you see. Fortunately, Metro provides most of the icons you’ll need right out of the box. That’s because the default font for Metro is called Segoe UI, and a font ships with Windows 8 called Segoe UI Symbol that contains dozens of icons. You can launch the Character Map application and switch the font to Segoe UI Symbol to browse these icons and determine their Unicode value. In XAML, you can simply specify the value using a special format. For example, the Unicode code for a back button is E112. To represent this in XAML, simply supply it as the content value for a button like this:
<StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="1">
<Button Style="{StaticResource AppBarButtonStyle}"
FontFamily="Segoe UI Symbol" FontSize="18.667"
Padding="8,8,0,0" Margin="0,0,0,10"
Content=""/>
<TextBlock Text="Back" />
</StackPanel>
That’s all there is to it! By using the pre-defined set of icons, you again ensure a consistent, crisp experience for the end user.