AnimatedIcon Clase

Definición

/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.XamlContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Source")]
class AnimatedIcon : IconElement

[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.XamlContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Source")]
public class AnimatedIcon : IconElement

Public Class AnimatedIcon
Inherits IconElement

Herencia

IconElement

AnimatedIcon

Atributos

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Ejemplos

La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.

Agregar un animatedIcon a un botón

En este ejemplo se muestra un botón Atrás que muestra un icono de flecha atrás que anima cuando se producen eventos de puntero.

• AnimatedBackVisualSource es una animación de flecha atrás proporcionada por WinUI.
• FallbackIconSource se usa cuando no se pueden reproducir animaciones.
• El método AddHandler con handledEventsToo establecido true en se usa para los eventos que el botón marca como Controlado.

<!-- 
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
-->

<AppBarButton x:Name="BackButton" Label="Back"
              muxc:AnimatedIcon.State="Normal"
              PointerEntered="AppBarButton_PointerEntered"
              PointerExited="AppBarButton_PointerExited">
    <muxc:AnimatedIcon>
        <animatedvisuals:AnimatedBackVisualSource/>
        <muxc:AnimatedIcon.FallbackIconSource>
            <muxc:SymbolIconSource Symbol="Back"/>
        </muxc:AnimatedIcon.FallbackIconSource>
    </muxc:AnimatedIcon>
</AppBarButton>

// using muxc = Microsoft.UI.Xaml.Controls;

// Add handlers.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SettingsButton.AddHandler(UIElement.PointerPressedEvent, 
        new PointerEventHandler(AppBarButton_PointerPressed), true);
    SettingsButton.AddHandler(UIElement.PointerReleasedEvent, 
        new PointerEventHandler(AppBarButton_PointerReleased), true);
    base.OnNavigatedTo(e);
}

// Remove handlers.
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    SettingsButton.RemoveHandler(UIElement.PointerPressedEvent, 
        (PointerEventHandler)AppBarButton_PointerPressed);
    SettingsButton.RemoveHandler(UIElement.PointerReleasedEvent, 
        (PointerEventHandler)AppBarButton_PointerReleased);
    base.OnNavigatedFrom(e);
}

private void AppBarButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "PointerOver");
}

private void AppBarButton_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Pressed");
}

private void AppBarButton_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
}

private void AppBarButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
}

Comentarios

Establezca la propiedad AnimatedIcon.Source para especificar el objeto visual animado para el icono. WinUI proporciona objetos visuales animados para algunos iconos comunes en el espacio de nombres Microsoft.UI.Xaml.Controls.AnimatedVisuals .

En algunos casos, la configuración del sistema o las limitaciones pueden impedir que el icono se anime.

• Si el usuario desactiva las animaciones en la configuración del sistema, AnimatedIcon muestra el marco final de la transición de estado en la que se encontraba el control.
• Especifique un fallbackIconSource que se usará cuando no se admiten animaciones, como en versiones anteriores de Windows que no admiten animaciones de Lottie.

Animaciones personalizadas

Puedes crear animaciones personalizadas para usarlas como icono animado en tu aplicación. Las animaciones se pueden crear con Adobe AfterEffects y, a continuación, puedes usar esa salida con la biblioteca Lottie-Windows para generar una clase personalizada que implemente IAnimatedVisualSource2. Puede usar esta clase como origen de un icono animado. Para obtener más información, consulte Uso de Lottie para crear contenido animado para un AnimatedIcon.

Controlar el estado del icono animado

Cambias la posición de reproducción y el estado de la animación estableciendo la propiedad adjunta AnimatedIcon.State . La propiedad state toma un valor de cadena que describe el estado visual, como "Normal", "PointerOver" o "Pressed". También puede especificar una transición de estado específica, como "PressedToNormal".

Un icono animado Source contiene marcadores que asignan una posición en la escala de tiempo de animación a un estado visual. Los valores de cadena que admite para Source establecer la State propiedad adjunta se definen en la Markers colección. Para obtener más información, consulta Definir marcadores AnimatedIcon.

Los orígenes visuales animados que se usan en las plantillas de control suelen tener un conjunto más complejo de Markers ese mapa para controlar los estados, mientras que los objetos visuales animados para un uso más general suelen tener un conjunto más sencillo de Markers ese mapa a eventos de puntero.

Dónde establecer el estado

Puedes establecer la propiedad en o AnimatedIcon en un antecesor en el árbol XAML. En cualquier caso, debe usar la sintaxis de propiedad adjunta, como esta:

<muxc:AnimatedIcon muxc:AnimatedIcon.State="Normal">...</muxc:AnimatedIcon>

<StackPanel muxc:AnimatedIcon.State="Normal" ...>
   <muxc:AnimatedIcon>
       <animatedvisuals:AnimatedBackVisualSource/>
   </muxc:AnimatedIcon>
</StackPanel>

Uso de estados visuales

Puedes agregar un AnimatedIcon objeto a de ControlTemplate un control XAML y usar un VisualStateManager para establecer su estado. Algunos controles, como NavigationViewItem, establecen automáticamente el estado de un AnimatedIcon objeto que se establece como su icono.

Para ver un ejemplo que establece AnimatedIcon.State en un estado visual de plantilla de control, consulte CheckBox_themeresources.xaml en el repositorio de GitHub de WinUI. El CheckBox control usa AnimatedAcceptVisualSource para su marca de verificación. Los establecedores de estado visual son similares a los siguientes:

<VisualState x:Name="CheckedPointerOver">
    ...
    <VisualState.Setters>
        <Setter Target="CheckGlyph.(AnimatedIcon.State)" Value="PointerOverOn"/>
    </VisualState.Setters>
</VisualState>

Controlar eventos de puntero

Para que responda a la AnimatedIcon interacción del usuario, debe establecer la propiedad adjunta AnimatedIcon.State en respuesta a algunos eventos de puntero. En esta tabla se muestran los eventos de puntero que normalmente controlará y los estados comunes que se asignan a estos eventos. (Sin embargo, no todos los orígenes de iconos animados se asignarán exactamente a estos estados).

Consulte la sección Ejemplos para ver el código de ejemplo que muestra estos controladores de eventos.

Propiedades adjuntas xaml

AnimatedIcon es la clase de servicio host para una propiedad adjunta XAML.

Para admitir el acceso del procesador XAML a las propiedades adjuntas y también para exponer operaciones de obtención y establecimiento equivalentes en el código, cada propiedad adjunta XAML tiene un par de métodos de descriptor de acceso Get y Set. Otra manera de obtener o establecer el valor en el código es usar el sistema de propiedades de dependencia, llamar a GetValue o SetValue y pasar el campo de identificador como identificador de propiedad de dependencia.

Consulte también

• AnimatedVisualPlayer
• Introducción al icono animado
• VisualStateManager
• Lottie-Windows