Compartilhar via


Extensões de ícone

As extensões de ícone são um grupo de extensões de marcação destinadas a simplificar a criação de vários tipos de ícone (especificamente BitmapIcon, BitmapIconSource, FontIcon, FontIconSource, SymbolIcon e SymbolIconSource) usados em uma variedade de controles XAML. O uso dessas extensões não habilita novos recursos em si, mas simplifica muito a sintaxe XAML necessária para criar instâncias desses tipos de ícone.

BitmapIconExtension

A extensão de marcação BitmapIconExtension é semelhante à estrutura das duas extensões anteriores, mas produz instâncias de BitmapIcon em vez de ícones baseados em fonte. Veja como pode ser usada:

<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

A classe BitmapIconSourceExtension espelha o tipo BitmapIconExtension, com a única diferença sendo que ela retorna uma instância de BitmapIconSource. Veja como pode ser usada:

<SwipeItems
    xmlns:ui="using:CommunityToolkit.WinUI"
    Mode="Reveal">
    <SwipeItem Text="Send" IconSource="{ui:BitmapIconSource Source=/Assets/myicon.png}"/>
</SwipeItems>

FontIconExtension

O tipo FontIconExtension fornece a capacidade de criar instâncias de FontIcon do XAML com uma representação mais compacta do que criando explicitamente um novo objeto FontIcon para atribuir à propriedade de destino. A propriedade também mapeia todas as propriedades FontIcon disponíveis, de modo que as duas APIs expõem o mesmo conjunto de opções de personalização, apenas por meio de uma sintaxe XAML diferente:

<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

A classe FontIconSourceExtension espelha o tipo FontIconExtension, mas produz instâncias de FontIconSource em vez de 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

O tipo SymbolIconExtension espelha a extensão de marcação FontIcon, com a principal diferença de que ele usa um valor Symbol para especificar o ícone. Todas as outras propriedades de FontIconExtension estão disponíveis, com exceção da família de fontes, que sempre é definida como "Ativos Segoe MDL2". Veja como pode ser usada:

<CommandBar xmlns:ui="using:CommunityToolkit.WinUI">

    <!--Before-->
    <AppBarButton>
        <AppBarButton.Icon>
            <SymbolIcon Symbol="Play"/>
        </AppBarButton.Icon>
    </AppBarButton>

    <!--After-->
    <AppBarButton Icon="{ui:SymbolIcon Symbol=Play}"/>
</CommandBar>

Observação

O SymbolIconExtension realmente retorna um valor de FontIcon em vez de um SymbolIcon. Isso é feito para incluir as propriedades adicionais (por exemplo, FontSize, FontWeight, etc.) que, de outra forma, não estariam disponíveis. Quando elas não forem modificadas, a aparência do ícone resultante ainda será a mesma resultante do uso de uma instância de SymbolIcon.

SymbolIconSource

O tipo SymbolIconSourceExtension é uma alternativa para FontIconSourceExtension que usa um valor de Symbol em vez de um texto e exibe o ícone com os "Ativos Segoe MDL2". É equivalente ao tipo SymbolIconExtension, exceto pelo fato de retornar uma instância de FontIconSource:

<SwipeItems
    xmlns:ui="using:CommunityToolkit.WinUI"
    Mode="Reveal">
    <SwipeItem Text="Play" IconSource="{ui:SymbolIconSource Symbol=Play}"/>
</SwipeItems>

Comentários

Todos os valores retornados por essas extensões de marcação pertencem ao namespace Windows.UI.Xaml.*. Isso significa que eles só funcionarão corretamente quando usados com controles desse namespace e não de Microsoft.UI.Xaml.* (o namespace WinUI). Por exemplo, tentar usar o FontIconSourceExtension para definir a propriedade IconSource no Microsoft.UI.Xaml.Controls.SwipeItems não funcionará corretamente, pois a extensão produzirá um valor de Windows.UI.Xaml.Controls.FontIconSource em vez de um Microsoft.UI.Xaml.Controls.FontIconSource. Ao trabalhar com controles WinUI, você precisará declarar manualmente os ícones necessários com a sintaxe XAML explícita.

Exemplos

Você pode encontrar mais exemplos nos testes de unidade.