图标扩展

图标扩展是一组标记扩展,旨在简化各种 XAML 控件中使用的各种图标类型的创建(特别是 BitmapIconBitmapIconSourceFontIconFontIconSourceSymbolIconSymbolIconSource)。 使用这些扩展本身不会启用新功能,但它会大大简化创建这些图标类型的实例所需的 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="&#xE102;" FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
        </AppBarButton.Icon>
    </AppBarButton>

    <!--After-->
    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE102;}"/>
</CommandBar>

FontIconSourceExtension

FontIconSourceExtension 类类似 FontIconExtension 类型,但生成 FontIconSource 实例,而不是 FontIcon

<SwipeItems
    xmlns:ui="using:CommunityToolkit.WinUI"
    Mode="Reveal">

    <!--Before-->
    <SwipeItem Text="Accept">
        <SwipeItem.IconSource>
            <FontIconSource Glyph="&#xE10B;"/>
        </SwipeItem.IconSource>
    </SwipeItem>
    
    <!--After-->
    <SwipeItem Text="Accept" IconSource="{ui:FontIconSource Glyph=&#xE10B;}"/>
</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 的值。 这样做是为了包括其他属性(例如 FontSizeFontWeight,等等),否则这些属性将不可用。 如果未修改这些图标,则生成图标的外观仍将与使用 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 命名空间)中的控件一起使用。 例如,尝试使用 FontIconSourceExtensionMicrosoft.UI.Xaml.Controls.SwipeItems 上设置 IconSource 属性将无法正常工作,因为扩展将生成 Windows.UI.Xaml.Controls.FontIconSource 值,而不是 Microsoft.UI.Xaml.Controls.FontIconSource 值。 使用 WinUI 控件时,需要使用显式 XAML 语法手动声明所需的图标。

示例

可以在单元测试中查找更多示例。