AnimatedIcon Clase
Definición
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í.
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
-
AnimatedIcon
- Atributos
Ejemplos
Sugerencia
Para obtener más información, instrucciones de diseño y ejemplos de código, consulta Icono animado.
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
establecidotrue
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 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). |