AnimatedIcon Clase

Referencia

Definición

Espacio de nombres:: Microsoft.UI.Xaml.Controls

Importante

Parte de la información hace referencia a la versión preliminar del producto, que puede haberse modificado sustancialmente antes de lanzar la versión definitiva. Microsoft no otorga ninguna garantía, explícita o implícita, con respecto a la información proporcionada aquí.

Editar

Representa un icono que muestra y controla un objeto visual que puede animarse en respuesta a la interacción del usuario y a los cambios de estado visual.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

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

Sugerencia

Para obtener más información, instrucciones de diseño y ejemplos de código, consulta Icono animado.

Abra la aplicación WinUI 2 Gallery y vea AnimatedIcon en acción.

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>

Importante

Si agregas un AnimatedIcon objeto al árbol XAML y estableces la State propiedad en un elemento antecesor, la State propiedad debe establecerse en un valor inicial antes de que el icono animado se cargue por primera vez para que el icono se anime. Normalmente, estableces el estado inicial en XAML como se muestra aquí.

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

Evento	State
PointerEntered	"`PointerOver`"
PointerPressed	"`Pressed`"
PointerReleased	"`Normal`"
PointerExited	"`Normal`"

Sugerencia

Si coloca dentro AnimatedIcon de un botón u otro control que tiene un evento Click , los PointerPressed eventos y PointerReleased se marcan como Controlados. Para controlar estos eventos en un botón, use el método AddHandler para conectar el controlador de eventos y especificar handledEventsToo como true. Use RemoveHandler para desconectar el controlador de eventos.

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.

Constructores

AnimatedIcon()

Inicializa una nueva instancia de la clase AnimatedIcon .

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

Propiedades

FallbackIconSource	Obtiene o establece el icono estático que se va a usar cuando no se puede ejecutar el icono animado. Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).
FallbackIconSourceProperty	Identifica la propiedad de dependencia FallbackIconSource . Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).
MirroredWhenRightToLeft	Obtiene o establece un valor que indica si el icono se refleja cuando FlowDirection es RightToLeft. Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).
MirroredWhenRightToLeftProperty	Identifica la propiedad de dependencia MirroredWhenRightToLeft . Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).
Source	Obtiene o establece el objeto visual animado mostrado por el `AnimatedIcon` objeto . Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).
SourceProperty	Identifica la propiedad de dependencia Source . Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).
StateProperty	Identifica la propiedad adjunta XAML AnimatedIcon.State . Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

Propiedades adjuntas

State

Propiedad que establece el desarrollador en AnimatedIcon.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

Métodos

GetState(DependencyObject)

Recupera el valor de la propiedad adjunta AnimatedIcon.State para dependencyObject especificado.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

SetState(DependencyObject, String)

Especifica el valor de la propiedad adjunta AnimatedIcon.State para dependencyObject especificado.

Esta documentación se aplica a WinUI 2 para UWP (para WinUI en el SDK de Aplicaciones para Windows, consulta los espacios de nombres SDK de Aplicaciones para Windows).

Se aplica a

AnimatedIcon Clase

Definición

Ejemplos

Agregar un animatedIcon a un botón

Comentarios

Animaciones personalizadas

Controlar el estado del icono animado

Dónde establecer el estado

Uso de estados visuales

Controlar eventos de puntero

Propiedades adjuntas xaml

Constructores

Propiedades

Propiedades adjuntas

Métodos

Se aplica a

Consulte también

Comentarios

Comentarios

Recursos adicionales