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

【问题标题】：Best way for creating Icons in Windows Store Applications (Windows 8 Metro)?在 Windows 应用商店应用程序（Windows 8 Metro）中创建图标的最佳方式？
【发布时间】：2012-11-29 04:51:51
【问题描述】：

我只是了解在 Visual Studio 2012 的 Windows Store App 中创建后退按钮，Microsoft 使用此值/键对

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

&#xE071; 是 Unicode 吗？如果是，如何获取 Windows 应用商店应用程序的有效代码列表，因为我使用了其中一些，它显示了一个空矩形？

【问题讨论】：

标签： wpf button icons windows-store-apps

【解决方案1】：

基于This的文章我创建了一个样式。

首先，在 StandardStyle.xaml（文件顶部）中添加字符串字典项

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

然后，在另一个或同一个 xaml 文件（样式文件）中添加以下样式

 <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>

【讨论】：

这种方式是否也可以用于普通的WPF桌面应用程序，还是只支持Windows Store Apps？

【解决方案2】：

关于获取有效代码列表，我强烈推荐this 应用程序，如果您有 Windows 8 设备可以运行它。它提供了大量现有 Windows 8 Dev 图标及其匹配代码的列表。它还让您更好地了解它们在 Metro 环境中的显示方式，并且该应用还提供了 XAML 示例，用于在各种结构中呈现图标，包括按钮、文本框或 AppBar。

正如您在上面的链接中看到的那样，您已经将 Metro 图标用作字体，但我建议使用我提供的应用程序作为参考，以便轻松找到每个图标的代码。

【讨论】：