在Windows应用商店应用程序（Windows 8 Metro）中创建图标的最佳方法？

Question

I just understand for creating back button in Windows Store App in visual studio 2012 , Microsoft use this Value/Key pairs

<x:String x:Key="BackButtonGlyph">&#xE071;</x:String>

 is a Unicode? If yes how can obtain the list of valid codes for Windows Store Application because I use some of them and It shows me a empty rectangle?

Answer 1

based on This article I create a style.

First, add string dictionary item in StandardStyle.xaml (top of the file)

<ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
         <x:String x:Key="DeleteButtonGlyph">&#xE107;</x:String>
   </ResourceDictionary>
   .

Then, add following style in another or same xaml file ( style file )

 <Style x:Key="DeleteButtonStyle" TargetType="Button">
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="ToolTipService.ToolTip" Value="Delete Selected Word"></Setter>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="24"/>
    <Setter Property="AutomationProperties.AutomationId" Value="DeleteButton"/>
    <Setter Property="AutomationProperties.Name" Value="Delete"/>
    <Setter Property="AutomationProperties.ItemType" Value="Delete Button"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Width="80">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="&#xE0DD;" FontSize="32" Margin="15, 0,0,0"></TextBlock>
                        <TextBlock x:Name="BackgroundGlyph" FontSize="32" Margin="15,0,0,0" Text="&#xE0DE;" Foreground="{StaticResource BackButtonBackgroundThemeBrush}"/>
                        <TextBlock Grid.Column="0" Grid.Row="0" Margin="25, 9,0,0"  x:Name="NormalGlyph" Text="{StaticResource DeleteButtonGlyph}" Foreground="{StaticResource BackButtonForegroundThemeBrush}"/>
                        <TextBlock Grid.Column="0" Grid.Row="0" Margin="25, 9,0,0" x:Name="ArrowGlyph" Text="{StaticResource DeleteButtonGlyph}" Foreground="{StaticResource BackButtonPressedForegroundThemeBrush}" Opacity="0"/>
                        <TextBlock Margin="0,10,0,5" Grid.Row="1" FontSize="12" Text="Delete Word" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                    </Grid>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverBackgroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation
                                        Storyboard.TargetName="ArrowGlyph"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="NormalGlyph"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="FocusVisualWhite"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="FocusVisualBlack"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

In regards to getting a list of valid codes, I would strongly recommend this application if you have a Windows 8 device to run it on. It provides a list of a large number of existing Windows 8 Dev icons and their matching codes. It also gives you a better idea of how they would appear in a Metro environment and the app also provides examples of XAML to use to present the icons within various structures, including within buttons, text boxes, or the AppBar.

As you can see in your link above you already have the Metro Icons as fonts but I would recommend using the application I give as a reference to easily find the code for each one.