アイコン拡張機能

アイコン拡張機能は、さまざまな XAML コントロールで使用されるさまざまなアイコンの種類 (具体的には BitmapIcon、BitmapIconSource、FontIcon、FontIconSource、SymbolIcon、SymbolIconSource) の作成を簡略化することを目的としたマークアップ拡張機能のグループです。 これらの拡張機能を使用しても、それ自体で新しい機能は有効になりませんが、これらのアイコンの種類のインスタンスを作成するために必要な XAML 構文が大幅に簡略化されます。

BitmapIconExtension

BitmapIconExtension マークアップ拡張は、前の 2 つの拡張機能の構造に似ていますが、フォントベースのアイコンではなく 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 型は、ターゲット プロパティに割り当てる新しい FontIcon オブジェクトを明示的に作成するよりもコンパクトな表現で XAML から FontIcon インスタンスを作成する機能を提供します。 このプロパティは、使用可能なすべての FontIcon プロパティもマップするため、2 つの 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 型を反映しますが、FontIcon ではなく FontIconSource インスタンスを生成します。

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

Note

SymbolIconExtension は、実際には SymbolIcon ではなく、FontIcon 値を返します。 これは、それ以外の方法では使用できなかった追加のプロパティ (FontSize、FontWeight など) を含めるために行われます。 変更されていない場合でも、結果のアイコンの外観は、SymbolIcon インスタンスを使用した結果と同じになります。

SymbolIconSource

SymbolIconSourceExtension 型は、テキストではなく Symbol 値を受け取り、アイコンを "Segoe MDL2 Assets" と共に表示する FontIconSourceExtension の代替手段です。 これは、FontIconSource インスタンスを返す点を除き、SymbolIconExtension 型と同じです。

<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 プロパティを設定しようとすると、拡張機能によって Microsoft.UI.Xaml.Controls.FontIconSource ではなく Windows.UI.Xaml.Controls.FontIconSource の値が生成されるため、正しく機能しません。 WinUI コントロールを使用する場合は、必要なアイコンを明示的な XAML 構文で手動で宣言する必要があります。

例

単体テストでは、さらに他の例を見つけることができます。

  • Last updated on