培训
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 是 FrameworkElement,因此可以像应用 UI 的任何其他元素一样将其添加到 XAML 对象树中。 但是,它不能添加到 ResourceDictionary 中,不能作为共享资源重复使用。
IconSource 类似于 IconElement;但是,由于它不是 FrameworkElement,因此不能用作 UI 中的独立元素,但可以作为资源共享。 IconSourceElement 是一个特殊的图标元素,它包装 IconSource,因此你可以在需要 IconElement 的任何位置使用它。 下一部分显示了这些功能的示例。
可以将 IconElement 派生类用作独立的 UI 组件。
此示例演示如何将图标标志符号设置为按钮的内容。 将按钮的 FontFamily 及其 SymbolThemeFontFamily
内容属性设置为要使用的字形的 Unicode 值。
<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
Content=""/>
还可以显式添加前面列出的图标元素对象之一,如 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=""/>
</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 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用,或在 GitHub 上获取源代码
通常通过将图标分配给另一个 icon
XAML 元素的属性,将图标放置在 UI 中。 Icon
名称 Source
中包含的属性采用 IconSource;否则,该属性采用 IconElement。
此列表显示具有属性 icon
的一些常见元素。
提示
可以在 WinUI 3 库应用中查看这些控件,查看图标的用法示例。
此页上的其余示例演示如何将图标分配给 icon
控件的属性。
向应用添加图标的最常见方法是使用 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 字体系列。
符号枚举中包含许多常见的字形SymbolThemeFontFamily
。 如果需要的字形可用作符号,则可以 在将 FontIcon 与默认字体系列一起使用的任何位置使用 SymbolIcon 。
还可以使用符号名称通过属性语法在 XAML 中设置icon
属性,如下所示
<AppBarButton Icon="Send" Label="Send"/>
符号枚举中仅提供 Segoe Fluent Icon 字形的一小部分。 若要使用任何其他可用的字形,请使用 FontIcon。 此示例演示如何使用SendFill
图标创建 AppBarButton。
<AppBarButton Label="Send">
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
如果未指定 FontFamily,或者指定在运行时系统上不可用的 SymbolThemeFontFamily
FontFamily,则 FontIcon 会回退到主题资源定义的默认字体系列。
还可以使用任何可用字体中的字形值指定图标。 此示例演示如何使用 Segoe UI 表情符号字体中的字形。
<AppBarToggleButton Label="FontIcon">
<AppBarToggleButton.Icon>
<FontIcon FontFamily="Segoe UI Emoji" Glyph="▶"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
有关详细信息和示例,请参阅 FontIcon 和 SymbolIcon 类文档。
提示
使用 WinUI 3 库应用中的 Iconography 页面查看、搜索和复制 Segoe Fluent 图标中提供的所有图标的代码。
动作是 Fluent Design 语言的重要组成部分。 动画图标可吸引对特定入口点的注意,提供从状态到状态的反馈,并增加对交互的愉悦感。
可以使用动画图标通过 Lottie 动画实现基于矢量的轻量级图标。
有关详细信息和示例,请参阅 动画图标 和 AnimatedIcon 类文档。
可以使用 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 从图像文件(如 PNG、GIF 或 JPEG)创建图标,尽管如果其他选项可用,则不建议使用它。 位图以特定尺寸创建,因此它们必须根据你需要的图标大小和屏幕分辨率放大或缩小。 当图像缩小(收缩)时,它可能会出现模糊。 纵向扩展时,它可能会出现块状和像素化。
默认情况下,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 显示 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。