通过

Windows 应用中的图标

  • 项目

图标提供操作、概念或产品的视觉速记。 通过将含义压缩为符号图像，图标可以跨越语言障碍并帮助节省宝贵的资源：屏幕空间。 良好的图标会与版式和设计语言的其余部分相协调。 他们不会混合比喻，他们只传达所需的内容，尽可能迅速和尽可能简单。

命令栏浮出控件，其中包含用于添加的图标 - 加号、编辑 - 铅笔、共享 - 页面和箭头以及设置 - 齿轮

图标可以显示在应用内和应用外部。 在应用中，使用图标来表示操作，例如复制文本或转到设置页面。

本文介绍应用 UI 中的图标。 若要了解在 Windows 中表示应用的图标（应用图标），请参阅 应用图标。

了解何时使用图标

图标可以节省空间，但应在何时使用？

对操作（如剪切、复制、粘贴和保存）或导航菜单上的项目使用图标。 如果用户可以轻松地理解图标的含义，且以小尺寸表达含义足够简单，则使用图标。

如果图标的含义不清晰，或者需要复杂的外形才能清晰表达，则不要使用图标。

使用正确的图标类型

可通过多种方式创建图标。 可以使用符号字体，如 Segoe Fluent 图标字体。 可以创建自己的基于矢量的图像。 甚至可以使用位图，不过我们不建议这样做。 下面是向应用添加图标的方法的摘要。

若要在 XAML 应用中添加图标，请使用 IconElement 或 IconSource。

下表显示了派生自 IconElement 和 IconSource 的各种图标。

IconElement IconSource 说明
AnimatedIcon AnimatedIconSource 表示一个图标，该图标显示和控制视觉对象，该视觉对象可以进行动画处理以响应用户交互和视觉状态更改。
BitmapIcon BitmapIconSource 表示使用位图作为其内容的图标。
FontIcon FontIconSource 表示使用指定字体中的字形的图标。
IconSourceElement 空值 表示使用 IconSource 作为其内容的图标。
ImageIcon ImageIconSource 表示使用图像作为其内容的图标。
PathIcon PathIconSource 表示使用向量路径作为其内容的图标。
SymbolIcon SymbolIconSource 表示一个图标，该图标使用资源中的 SymbolThemeFontFamily 字形作为其内容。

IconElement 与 IconSource

IconElement 是 FrameworkElement，因此可以像应用 UI 的任何其他元素一样将其添加到 XAML 对象树中。 但是，它不能添加到 ResourceDictionary 中，不能作为共享资源重复使用。

IconSource 类似于 IconElement;但是，由于它不是 FrameworkElement，因此不能用作 UI 中的独立元素，但可以作为资源共享。 IconSourceElement 是一个特殊的图标元素，它包装 IconSource，因此你可以在需要 IconElement 的任何位置使用它。 下一部分显示了这些功能的示例。

IconElement 示例

可以将 IconElement 派生类用作独立的 UI 组件。

此示例演示如何将图标标志符号设置为按钮的内容。 将按钮的 FontFamily 及其 SymbolThemeFontFamily 内容属性设置为要使用的字形的 Unicode 值。

<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
        Content="&#xE768;"/>

带有播放图标的按钮，指向右侧的三角形的轮廓

还可以显式添加前面列出的图标元素对象之一，如 SymbolIcon。 这为你提供了更多类型的图标可供选择。 它还允许你根据需要组合图标和其他类型的内容，例如文本。

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play"/>
        <TextBlock Text="Play" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

带有播放图标的按钮，指向右侧的三角形的轮廓，其下方的文本播放

此示例演示如何在 ResourceDictionary 中定义 FontIconSource，然后使用 IconSourceElement 在应用的不同位置重复使用资源。

<!--App.xaml-->
<Application
   ...>
    <Application.Resources>
        <ResourceDictionary>
            ...
            <!-- Other app resources here -->

            <FontIconSource x:Key="CertIconSource" Glyph="&#xEB95;"/>

        </ResourceDictionary>
    </Application.Resources>
</Application>

<StackPanel Orientation="Horizontal">
    <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
    <TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>

<Button>
    <StackPanel>
        <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
        <TextBlock Text="View certificate" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

包含文本证书的证书图标已过期，以及带有证书图标和文本视图证书的按钮

打开 WinUI 3 库应用以查看 IconElement 的操作

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

图标属性

通常通过将图标分配给另一个 icon XAML 元素的属性，将图标放置在 UI 中。 Icon 名称 Source 中包含的属性采用 IconSource;否则，该属性采用 IconElement。

此列表显示具有属性 icon 的一些常见元素。

命令/操作 导航 状态/其他
AppBarButton.Icon AppBarToggleButton.Icon AutoSuggestBox.QueryIcon MenuFlyoutItem.Icon MenuFlyoutSubItem.Icon SwipeItem.IconSource XamlUICommand.IconSource NavigationViewItem.Icon SelectorBarItem.Icon TabViewItem.IconSource AnimatedIcon.FallbackIconSource AnimatedIconSource.FallbackIconSource IconSourceElement.IconSource InfoBadge.IconSource InfoBar.IconSource TeachingTip.IconSource

提示

可以在 WinUI 3 库应用中查看这些控件，查看图标的用法示例。

此页上的其余示例演示如何将图标分配给 icon 控件的属性。

FontIcon 和 SymbolIcon

向应用添加图标的最常见方法是使用 Windows 中的图标字体提供的系统图标。 Windows 11 引入了新的系统图标字体 Segoe Fluent Icon，它提供 1,000 多个专为 Fluent Design 语言设计的图标。 从字体获取图标可能并不直观，但 Windows 字体显示技术意味着这些图标在任何显示器上、分辨率和任何大小上看起来都清晰清晰。

重要

默认字体系列

FontIcon 和 SymbolIcon 不使用直接指定 FontFamily ，而是使用 XAML 主题资源定义的 SymbolThemeFontFamily 字体系列。 默认情况下，此资源使用 Segoe Fluent Icon 字体系列。 如果你的应用在 Windows 10 版本 20H2 或更早版本上运行，则 Segoe Fluent Icon 字体系列不可用，并且资源 SymbolThemeFontFamily 会回退到 Segoe MDL2 Assets 字体系列。

Symbol 枚举

符号枚举中包含许多常见的字形SymbolThemeFontFamily。 如果需要的字形可用作符号，则可以 在将 FontIcon 与默认字体系列一起使用的任何位置使用 SymbolIcon 。

还可以使用符号名称通过属性语法在 XAML 中设置icon属性，如下所示

<AppBarButton Icon="Send" Label="Send"/>

带有发送图标的按钮，箭头箭头的轮廓指向右侧

提示

只能使用符号名称通过缩短的属性语法设置icon属性。 所有其他图标类型都必须使用较长 的属性元素语法进行设置，如本页上的其他示例所示。

字体图标

符号枚举中仅提供 Segoe Fluent Icon 字形的一小部分。 若要使用任何其他可用的字形，请使用 FontIcon。 此示例演示如何使用SendFill图标创建 AppBarButton。

<AppBarButton Label="Send">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE725;"/>
    </AppBarButton.Icon>
</AppBarButton>

带有发送填充图标的按钮，箭头箭头指向右侧

如果未指定 FontFamily，或者指定在运行时系统上不可用的 SymbolThemeFontFamily FontFamily，则 FontIcon 会回退到主题资源定义的默认字体系列。

还可以使用任何可用字体中的字形值指定图标。 此示例演示如何使用 Segoe UI 表情符号字体中的字形。

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

带有 Segoe UI 表情符号字体中播放图标的按钮，一个指向蓝色背景右侧的白色箭头

有关详细信息和示例，请参阅 FontIcon 和 SymbolIcon 类文档。

提示

使用 WinUI 3 库应用中的 Iconography 页面查看、搜索和复制 Segoe Fluent 图标中提供的所有图标的代码。

打开 WinUI 3 库应用到图标页

AnimatedIcon

动作是 Fluent Design 语言的重要组成部分。 动画图标可吸引对特定入口点的注意，提供从状态到状态的反馈，并增加对交互的愉悦感。

可以使用动画图标通过 Lottie 动画实现基于矢量的轻量级图标。

有关详细信息和示例，请参阅 动画图标 和 AnimatedIcon 类文档。

打开 WinUI 3 库应用以查看 AnimatedIcon 的操作

PathIcon

可以使用 PathIcon 创建自定义图标，这些图标使用基于矢量的形状，因此它们始终看起来清晰。 但是，使用 XAML 几何 图形创建形状很复杂，因为必须单独指定每个点和曲线。

此示例演示了定义 PathIcon 中使用的 Geometry 的两种不同的方法。

<AppBarButton Label="PathIcon">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="Circles">
    <AppBarButton.Icon>
        <PathIcon>
            <PathIcon.Data>
                <GeometryGroup>
                    <EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
                    <EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
                    <EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
                    <EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
                    <EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
                </GeometryGroup>      
            </PathIcon.Data>
        </PathIcon>
    </AppBarButton.Icon>
</AppBarButton>

带有自定义路径图标的按钮带有自定义路径图标的按钮，中间点周围有两个圆圈

若要详细了解如何使用 Geometry 类创建自定义形状，请参阅类文档和移动和 绘制几何图形命令。 另请参阅 WPF Geometry 文档。 WinUI Geometry 类与 WPF 类没有相同的功能，但为两者创建形状都相同。

有关详细信息和示例，请参阅 PathIcon 类文档。

BitmapIcon 和 ImageIcon

可以使用 BitmapIcon 或 ImageIcon 从图像文件（如 PNG、GIF 或 JPEG）创建图标，尽管如果其他选项可用，则不建议使用它。 位图以特定尺寸创建，因此它们必须根据你需要的图标大小和屏幕分辨率放大或缩小。 当图像缩小（收缩）时，它可能会出现模糊。 纵向扩展时，它可能会出现块状和像素化。

BitmapIcon

默认情况下，BitmapIcon 从图像中去除所有颜色信息，并在前景色中呈现所有非透明像素。 若要创建单色图标，请使用 PNG 格式的透明背景上的纯色图像。 其他图像格式显然不会出错，但会导致前景色的纯色块。

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.png"/>
    </AppBarButton.Icon>
</AppBarButton>

带有位图图标的按钮、黑白饼形切片

可以通过将 ShowAsMonochrome 属性设置为 false 来替代默认行为。 在这种情况下，BitmapIcon 的行为与支持位图文件类型的 ImageIcon 相同（不支持 SVG 文件）。

<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg" 
            ShowAsMonochrome="False"/>

有关详细信息和示例，请参阅 BitmapIcon 类文档。

提示

BitmapIcon 的使用类似于 BitmapImage 的使用; 有关适用于 BitmapIcon 的详细信息，请参阅 BitmapImage 类，例如在代码中设置 UriSource 属性。

ImageIcon

ImageIcon 显示 ImageSource 派生类之一提供的图像。 最常见的是 BitmapSource，但如前所述，由于潜在的缩放问题，我们不建议将位图图像用于图标。

可缩放矢量图形（SVG）资源非常适合图标，因为它们始终以任何大小或分辨率清晰显示。 可以将 SVGImageSource 与 ImageIcon 配合使用，该模式支持 SVG 规范中的安全静态模式，但不支持动画或交互。 有关详细信息，请参阅 SVGImageSource 和 SVG 支持。

ImageIcon 会 忽略前台 属性，因此它始终以原始颜色显示图像。 由于前台颜色被忽略，因此在按钮或其他类似控件中使用时，图标不会响应视觉状态更改。

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

带有图像图标的按钮，采用不同颜色的饼形切片

有关详细信息和示例，请参阅 ImageIcon 类文档。

提示

ImageIcon 的使用类似于图像控件; 有关适用于 ImageIcon 的详细信息，请参阅 Image 类。 一个显著区别是，对于 ImageIcon，仅使用多帧图像的第一帧（如动画 GIF）。 若要使用动画图标，请参阅 AnimatedIcon。