Extensiones de icono

Las extensiones de icono son un grupo de extensiones de marcado diseñadas para simplificar la creación de varios tipos de iconos (en concreto BitmapIcon, BitmapIconSource, FontIcon, FontIconSource, SymbolIcon y SymbolIconSource) usados en una variedad de controles XAML. El uso de estas extensiones no habilita nuevas funcionalidades per se, pero simplifica considerablemente la sintaxis XAML necesaria para crear instancias de estos tipos de iconos.

BitmapIconExtension

La extensión de marcado BitmapIconExtension es similar en estructura a las dos extensiones anteriores, pero genera instancias BitmapIcon en lugar de iconos basados en fuentes. Aquí se muestra cómo se puede usar:

<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

La clase BitmapIconSourceExtension refleja el tipo BitmapIconExtension, siendo la única diferencia que devuelve una instancia BitmapIconSource. Aquí se muestra cómo se puede usar:

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

FontIconExtension

El tipo FontIconExtension proporciona la capacidad de crear instancias FontIcon a partir de XAML con una representación más compacta que mediante la creación explícita de un nuevo objeto FontIcon para asignar a la propiedad de destino. La propiedad también asigna todas las propiedades FontIcon disponibles, por lo que las dos API exponen el mismo conjunto de opciones de personalización, simplemente a través de una sintaxis 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

La clase FontIconSourceExtension refleja el tipo FontIconExtension, pero genera instancias FontIconSource en lugar 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

El tipo SymbolIconExtension refleja la extensión de marcado FontIcon, siendo la diferencia principal que usa un valor Symbol para especificar el icono. Todas las demás propiedades de FontIconExtension están disponibles, a excepción de la familia de fuentes, que siempre se establece en "Segoe MDL2 Assets". Aquí se muestra cómo se puede usar:

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

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

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

Nota:

SymbolIconExtension realmente devuelve un valor FontIcon en lugar de uno SymbolIcon. Esto se hace para incluir las propiedades adicionales (por ejemplo FontSize, FontWeight, etc.) que de lo contrario no habrían estado disponibles. Cuando no se modifican, el aspecto del icono resultante seguirá siendo el mismo que el que habría resultado del uso de una instancia SymbolIcon.

SymbolIconSource

El tipo SymbolIconSourceExtension es una alternativa para que FontIconSourceExtension tome un valor Symbol en lugar de un texto y muestre el icono con "Segoe MDL2 Assets". Es equivalente al tipo SymbolIconExtension, excepto por el hecho de que devuelve una instancia FontIconSource:

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

Comentarios

Todos los valores devueltos por estas extensiones de marcado pertenecen al espacio de nombres Windows.UI.Xaml.*. Esto significa que solo funcionarán correctamente cuando se usen con controles de ese espacio de nombres y no desde Microsoft.UI.Xaml.* (el espacio de nombres WinUI). Por ejemplo, al intentar usar FontIconSourceExtension para establecer la propiedad IconSource en Microsoft.UI.Xaml.Controls.SwipeItems, no funcionará correctamente, ya que la extensión generará un valor Windows.UI.Xaml.Controls.FontIconSource en lugar de uno Microsoft.UI.Xaml.Controls.FontIconSource. Al trabajar con controles WinUI, tendrá que declarar manualmente los iconos que necesita con la sintaxis XAML explícita.

Ejemplos

Puede encontrar más ejemplos en las pruebas unitarias.