图标扩展是一组标记扩展,旨在简化各种 XAML 控件中使用的各种图标类型的创建(特别是 BitmapIcon
、BitmapIconSource
、FontIcon
、FontIconSource
、SymbolIcon
和 SymbolIconSource
)。 使用这些扩展本身不会启用新功能,但它会大大简化创建这些图标类型的实例所需的 XAML 语法。
BitmapIconExtension
BitmapIconExtension
标记扩展的结构类似于前两个扩展,但它生成 BitmapIcon
实例而不是基于字体的图标。 以下是它的使用方法:
<MenuFlyout xmlns:ui="using:CommunityToolkit.WinUI">
<!--Before-->
<MenuFlyoutItem Text="Click me!">
<MenuFlyoutItem.Icon>
<BitmapIcon Source="/Assets/myicon.png"/>
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<!--After-->
<MenuFlyoutItem
Text="No, click me!"
Icon="{ui:BitmapIcon Source=/Assets/myicon.png}" />
</MenuFlyout>
BitmapIconSourceExtension
BitmapIconSourceExtension
类类似 BitmapIconExtension
类型,唯一的区别是它返回 BitmapIconSource
实例。 以下是它的使用方法:
<SwipeItems
xmlns:ui="using:CommunityToolkit.WinUI"
Mode="Reveal">
<SwipeItem Text="Send" IconSource="{ui:BitmapIconSource Source=/Assets/myicon.png}"/>
</SwipeItems>
FontIconExtension
FontIconExtension
类型提供从 XAML 创建 FontIcon
实例的功能,其表示形式比显式新建要分配给目标属性的 FontIcon
对象更紧凑。 该属性还映射所有可用 FontIcon
属性,因此两个 API 仅通过不同的 XAML 语法公开相同的自定义选项集:
<CommandBar xmlns:ui="using:CommunityToolkit.WinUI">
<!--Before-->
<AppBarButton>
<AppBarButton.Icon>
<FontIcon Glyph="" FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
</AppBarButton.Icon>
</AppBarButton>
<!--After-->
<AppBarButton Icon="{ui:FontIcon Glyph=}"/>
</CommandBar>
FontIconSourceExtension
FontIconSourceExtension
类类似 FontIconExtension
类型,但生成 FontIconSource
实例,而不是 FontIcon
:
<SwipeItems
xmlns:ui="using:CommunityToolkit.WinUI"
Mode="Reveal">
<!--Before-->
<SwipeItem Text="Accept">
<SwipeItem.IconSource>
<FontIconSource Glyph=""/>
</SwipeItem.IconSource>
</SwipeItem>
<!--After-->
<SwipeItem Text="Accept" IconSource="{ui:FontIconSource Glyph=}"/>
</SwipeItems>
SymbolIconExtension
SymbolIconExtension
类型类似 FontIcon
标记扩展,主要区别在于它使用 Symbol
值来指定图标。 除字体系列外,FontIconExtension
中的所有其他属性均可用,区别在于字体系列始终设置为“Segoe MDL2 Assets”。 以下是它的使用方法:
<CommandBar xmlns:ui="using:CommunityToolkit.WinUI">
<!--Before-->
<AppBarButton>
<AppBarButton.Icon>
<SymbolIcon Symbol="Play"/>
</AppBarButton.Icon>
</AppBarButton>
<!--After-->
<AppBarButton Icon="{ui:SymbolIcon Symbol=Play}"/>
</CommandBar>
注意
SymbolIconExtension
实际上返回 FontIcon
的值,而不是 SymbolIcon
的值。 这样做是为了包括其他属性(例如 FontSize
、FontWeight
,等等),否则这些属性将不可用。 如果未修改这些图标,则生成图标的外观仍将与使用 SymbolIcon
实例生成的图标的外观相同。
SymbolIconSource
SymbolIconSourceExtension
类型是 FontIconSourceExtension
的替代类型,它采用 Symbol
值而不是文本,并显示带有“Segoe MDL2 Assets”的图标。 它等效于 SymbolIconExtension
类型,但会返回 FontIconSource
实例:
<SwipeItems
xmlns:ui="using:CommunityToolkit.WinUI"
Mode="Reveal">
<SwipeItem Text="Play" IconSource="{ui:SymbolIconSource Symbol=Play}"/>
</SwipeItems>
注解
这些标记扩展返回的所有值都属于 Windows.UI.Xaml.*
命名空间。 这意味着,仅当与该命名空间中的控件一起使用时,它们才能正常工作,而不是与 Microsoft.UI.Xaml.*
(WinUI 命名空间)中的控件一起使用。 例如,尝试使用 FontIconSourceExtension
在 Microsoft.UI.Xaml.Controls.SwipeItems
上设置 IconSource
属性将无法正常工作,因为扩展将生成 Windows.UI.Xaml.Controls.FontIconSource
值,而不是 Microsoft.UI.Xaml.Controls.FontIconSource
值。 使用 WinUI 控件时,需要使用显式 XAML 语法手动声明所需的图标。
示例
可以在单元测试中查找更多示例。