XamlFlair

Xamlflair

El objetivo de la biblioteca XAMLFLAIR es facilitar la implementación de animaciones comunes y permitir que un desarrollador agregue fácilmente un conjunto de animaciones solos o combinados con solo unas pocas líneas de XAML.

Escaparate

Juego de rompecabezas de Sekuence

Apoyándome

Si desea apoyar mi trabajo con algunos cafés, puede hacerlo aquí: cómpreme un café. Su ayuda me permite continuar pasando tiempo en este proyecto y continuar manteniéndolo y actualizándolo con nuevas funciones cuando sea posible. ¡Gracias de antemano!

Contenido

• Instalar desde Nuget

• Descripción general de las características

• Conceptos básicos

• Uso

• Tipos de animación base

• Animaciones de color ( solo WPF y UNO )

• Anular los valores predeterminados globales

• Uso de un ResourceDictionary para la configuración base

• Animaciones predeterminadas ( solo WPF )

• Propiedad TransformOn ( solo WPF )

• Rotaciones de perspectiva ( solo UWP )

• Combinando animaciones

• Valores primordiales

• Traducciones relativas en ejes x e y

• Animaciones compuestas

• Repetiendo animaciones

• Eventos

• Ataduras

• Comandos de finalización primaria y secundaria

• Usando la propiedad StartWith

• Uso de la propiedad AllowOpacityReset ( solo WPF )

• Uso de la propiedad ClipToBounds ( UWP y UNO solamente )

• Animaciones de depuración

• Animaciones de registro

• Animaciones ListViewBase ( UWP y UNO ) y ListBox ( WPF )

Instalar desde Nuget

Plataforma	Paquete	Nuget
UWP	Xamlflair.uwp
WPF	Xamlflair.wpf
Desatado	Xamlflair.oNo

Para instalar XAMLFLAIR , ejecute el siguiente comando en la consola del administrador de paquetes :

UWP:

 Install-Package XamlFlair.UWP

Su aplicación debe apuntar a un mínimo de Windows 10 versión 1809 (compilación 17763)

WPF:

 Install-Package XamlFlair.WPF

Uno:

 Install-Package XamlFlair.Uno

Su aplicación UWP debe apuntar a un mínimo de Windows 10 versión 1809 (compilación 18362)

Descripción general de las características

Característica	UWP	WPF	UWP (UNO)	iOS (Uno)	Android (Uno)	Wasm (uno) experimental
Sistema de animación	Composición	Guiones gráficos	Guiones gráficos	Guiones gráficos	Guiones gráficos	Guiones gráficos
Tipo de transformación	N / A	Grupo de transformación	Compositetransform	Compositetransform	Compositetransform	Compositetransform
Defaultanimations.xaml	-	✔	-	-	-	-
TransformOn	-	✔	-	-	-	-
Animaciones compuestas	✔	✔	✔	✔	✔	✔
Traducciones relativas	✔	✔	✔	✔	✔	✔
Repetiendo animaciones	✔	✔	✔	✔	✔	✔
Eventos y enlaces	✔	✔	✔	✔	✔	✔
Comandos de finalización primaria/secundaria	✔	✔	✔	✔	✔	✔
StartWith	✔	✔	✔	✔	✔	✔
AllowOpacityReset	-	✔	-	-	-	-
ClipToBounds	✔	N / A	✔	✔	✔	✔
Listas animadas	✔	✔	✔	✔	✔	✔
Efecto desenfoque	✔	✔	-	-	-	-
Efecto de saturación	✔	-	-	-	-	-
Efecto de tinte	✔	-	-	-	-	-
Animaciones de color	-	✔	✔	✔	✔	✔
Rotaciones de perspectiva (giratorio)	✔	-	-	-	-	-
Animaciones de depuración	✔	✔	✔	✔	✔	-

Conceptos básicos

El concepto básico de XamlFlair se basa en animaciones que se clasifican como de y a . Cualquier elemento de interfaz de usuario que consulte una animación desde una animación comenzará con uno o más valores arbitrarios, y completará utilizando el valor predeterminado de la propiedad correspondiente . Cualquier elemento de interfaz de usuario que consulte una animación comenzará en su estado actual y se animará a uno o más valores arbitrarios .

Ejemplo de A de animación (un elemento UI que se traduce al valor predeterminado de una traducción (0)):

Ejemplo de A para la animación (un elemento de interfaz de usuario que se aleja de su estado actual):

Nota : Es importante tener en cuenta que hay una excepción a esta regla para las animaciones de color, que se explica en la sección de tipos de animación base.

Uso

Para comenzar, debe tener la siguiente referencia del espacio de nombres XAML:

UWP y UNO:

xmlns:xf="using:XamlFlair"

WPF:

xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

De aquí en adelante, es una simple cuestión de establecer una propiedad adjunta a cualquier FrameworkElement que necesite una animación:

< Border xf:Animations.Primary= " {StaticResource FadeIn} " />

NOTA : Si su FrameworkElement define una CompositeTransform en su XAML, se alterará durante el proceso de animación.

Nota : El uso de StaticResource es hacer referencia a las animaciones comunes globales, que se discute en la siguiente sección.

Tipos de animación base

Desteñir

ADVERTENCIA : Tenga cuidado al animar FadeTo ya que el elemento permanece en el árbol visual si la Visibility es Visible . Puede haber casos en los que necesitará administrar manualmente IsHitTestVisible para permitir que el usuario aproveche el elemento.

Traducir

Escala

Girar

Blur ( UWP y WPF solamente )

Saturate ( solo UWP )

Tinte ( solo UWP )

Color ( solo WPF y UNO )

Nota : es importante tener en cuenta al animar un color usando una animación de una animación, el color se animará de un valor especificado a su estado actual en lugar de un valor predeterminado.

Giratorio ( solo UWP )

Nota : Lea la sección Rotaciones de perspectiva ( solo UWP ) para más detalles.

Lo siguiente enumera algunos valores predeterminados notables cuando se trabaja con XAMLFLAIR:

• Tipo : fadeto
• Duración ( milisegundos ): 500
• Falcando : cúbico
• Modo de relevación : facilitar
• TransformcenterPoint : (0.5, 0.5)
• Evento : cargado
• InterelementDelay ( milisegundos ): 25 ( solo controles de la lista )
• TransformOn : Render ( solo WPF )
• Saturación : 0.5 ( solo UWP )
• Tint : transparente ( solo UWP )

Animaciones de color ( solo WPF y UNO )

Las animaciones de color requieren cierta atención, ya que son ligeramente diferentes a las otras animaciones de tipo base. Cuando se usa ColorTo y ColorFrom , se debe hacer lo siguiente:

• Solo puede animar las siguientes propiedades: Control.Background , Control.Foreground . Forebround, Control.BorderBrush , Border.Background , Border.BorderBrush , TextBlock.Foreground , Shape.Fill , Shape.Stroke
• Asegúrese de establecer un pincel en la propiedad correspondiente que tiene la intención de animar
• También debe especificar la propiedad de destino utilizando ColorOn

El siguiente ejemplo animará el Fill del rectángulo de RoyalBlue a Darkgreen:

< xf : AnimationSettings x : Key = " SampleColorAnimation "
                      Kind = " ColorTo "
                      Color = " DarkGreen "
                      ColorOn = " Fill " />

< Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource SampleColorAnimation} " />

Anular los valores predeterminados globales

Si tiene la necesidad de cambiar globalmente uno de los valores de animación predeterminados (por ejemplo, tener una Duration predeterminada de 750 en lugar de 500), puede llamar a la función de OverrideDefaultSettings en el código de inicialización de su aplicación. El siguiente ejemplo cambia los valores predeterminados para Duration y Easing :

 XamlFlair . Animations . OverrideDefaultSettings (
    duration : 750 ,
    easing : EasingType . Quadratic ) ;

Por lo tanto, con el código de muestra anterior, cada animación se ejecutará durante 750 ms con una flexibilización cuadrática.

Uso de un ResourceDictionary para la configuración base

Todas las animaciones comunes deben colocarse en un Global ResourceDictionary (Ex: Animations.xaml ) y usarse donde sea necesario en toda la aplicación. El objetivo es consolidar todas las animaciones en un archivo con nombres significativos para que cualquier desarrollador pueda entender exactamente qué animación se aplica a un FrameworkElement . Aquí hay un pequeño ejemplo de cómo se ve:

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >

    < x : Double x : Key = " PositiveOffset " >50</ x : Double >
    < x : Double x : Key = " NegativeOffset " >-50</ x : Double >
    < x : Double x : Key = " SmallScaleFactor " >0.75</ x : Double >
    < x : Double x : Key = " LargeScaleFactor " >1.25</ x : Double >

    < xf : AnimationSettings x : Key = " FadeIn "
                          Kind = " FadeFrom "
                          Opacity = " 0 " />

    < xf : AnimationSettings x : Key = " FadeOut "
                          Kind = " FadeTo "
                          Opacity = " 0 " />

    <!-- Scale to a larger value -->
    < xf : AnimationSettings x : Key = " Expand "
                          Kind = " ScaleXTo,ScaleYTo "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />

    <!-- Scale from a larger value -->
    < xf : AnimationSettings x : Key = " Contract "
                          Kind = " ScaleXFrom,ScaleYFrom "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Para configurar este conjunto de AnimationSettings preconfiguradas ya disponibles en su aplicación, realice los siguientes pasos:

1. Haga clic con el botón derecho en su proyecto, luego haga clic en Agregar> Nuevo elemento ...
2. Elija el diccionario de recursos y loglate it Animations.xaml
3. En su App.xaml , agregue lo siguiente:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " Animations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

4. En Animations.xaml , copie y pegue los contenidos de los enlaces correspondientes a continuación:

• Configuración de animación para UWP

• Configuración de animación para WPF

• Configuración de animación para Uno

Su aplicación ahora tiene un conjunto global de animaciones comunes listas para usar.

Animaciones predeterminadas ( solo WPF )

Alternativamente, a la creación de su propio ResourceDictionary que contiene sus AnimationSettings personalizadas, XamlFlair proporciona algunas animaciones predeterminadas .

Para hacer referencia a estas animaciones predeterminadas en su aplicación, realice los siguientes pasos en su App.xaml :

1. Defina el espacio de nombres XamlFlair.WPF en la parte superior:

    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

2. Actualice los recursos de su aplicación:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < xf : XamlFlairResources />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Su aplicación ahora tiene un conjunto global de animaciones predeterminadas listas para usar.

Si Visual Studio IntelliSense no funciona cuando se usa <xf:XamlFlairResources /> , es posible que desee probar lo siguiente:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Propiedad TransformOn ( solo WPF )

Usando la propiedad TransformOn , puede apuntar a qué tipo de RenderTransform para aplicar a su animación. Las opciones disponibles son Render y Layout . Cuando no se especifica nada, el valle predeterminado es Render . Aquí hay un ejemplo de los dos:

Nota : Muy importante tener en cuenta que LayoutTransform de WPF no admite ninguna TranslateTransform , por lo tanto, traducir las animaciones nunca funcionarán. Puede leer más al respecto en la sección de comentarios aquí.

Rotaciones de perspectiva ( solo UWP )

Es importante tener en cuenta que para aplicar una rotación de perspectiva (también denominada Swivel ) a un elemento objetivo, se requiere que se envuelva en un contenedor con las propiedades de diseño aplicadas al elemento contenedor. Por lo tanto, considere la siguiente rotación de perspectiva simple:

< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
                      Kind = " SwivelYFrom "
                      SwivelY = " -45 " />

En lugar de animar el elemento como tal:

< Rectangle Fill = " RoyalBlue "
           Width = " 200 "
           Height = " 200 "
           HorizontalAlignment = " Center "
           VerticalAlignment = " Center "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />

El elemento debe colocarse en un contenedor para que la animación funcione correctamente:

< Border Width = " 200 "
        Height = " 200 "
        HorizontalAlignment = " Center "
        VerticalAlignment = " Center " >
    < Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border >

Combinando animaciones

Las animaciones se pueden combinar, y como se mencionó anteriormente, cualquiera de estas animaciones combinadas que se usan comúnmente deben colocarse en el Global ResourceDictionary (Ex: Animations.xaml ):

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >
    .
    .
    .
    < xf : AnimationSettings x : Key = " FadeInAndSlideFromLeft "
                          Kind = " FadeFrom,TranslateXFrom "
                          Opacity = " 0 "
                          OffsetX = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndSlideFromTop "
                          Kind = " FadeFrom,TranslateYFrom "
                          Opacity = " 0 "
                          OffsetY = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrow "
                          Kind = " FadeFrom,ScaleXFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} "
                          ScaleY = " {StaticResource SmallScaleFactor} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrowHorizontally "
                          Kind = " FadeFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Esto demuestra una animación combinada de un FadeFrom y TranslateFrom :

Esto demuestra una animación combinada de un FadeFrom , TranslateFrom y ScaleFrom :

Valores primordiales

Las animaciones pueden anular su configuración directamente en FrameworkElement . Esto se hace comúnmente para alterar los valores para el retraso y la duración para que no poblemos demasiado el archivo Animations.xaml con recursos repetidos. Para lograr la prima, use la extensión de marcado Animate combinado con la propiedad BasedOn :

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " />

Traducciones relativas en ejes x e y

Dado que los valores codificados para OffsetX y OffsetY pueden ser limitantes (como en los casos cuando se trata de ventanas residables), tanto OffsetX como OffsetY admiten valores basados ​​en estrellas:

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />

Un valor basado en estrellas calculará el desplazamiento en función del ActualWidth y /o el valor (s) ActualHeight (s) del marco de la FrameworkElement , por lo tanto, es importante que el elemento haya ejecutado su evento Loaded . Si ActualWidth y/o ActualHeight aún no se calculan, el valor de compensación intentará basarse en Width y/o Height .

Animaciones compuestas

Una animación compuesta es simplemente una animación de varios pasos que usa la clase CompoundSettings . Cada animación interna se ejecuta una vez que se completa la anterior, por lo tanto, son animaciones secuenciales:

< xf : CompoundSettings x : Key = " Compound " >
    < xf : CompoundSettings .Sequence>
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1.25 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " RotateTo "
                              Rotation = " 360 "
                              Duration = " 1250 " />
    </ xf : CompoundSettings .Sequence>
</ xf : CompoundSettings >

Nota : CompoundSettings admite la propiedad Event , que se discute en una sección posterior.

Repetiendo animaciones

Se puede repetir una animación utilizando las propiedades de IterationBehavior y IterationCount (valores predeterminados del Count y 1 respectivamente).

Lo siguiente demuestra cómo ejecutar una animación solo 5 veces:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationCount= " 5 " />

Lo siguiente demuestra cómo ejecutar una animación indefinidamente:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationBehavior= " Forever " />

También tenga en cuenta que también es posible repetir una animación compuesta. Por ejemplo, usando la animación compuesta (llamada progreso ) de la sección anterior:

< Border xf:Animations.Primary= " {StaticResource Progress} "
        xf:Animations.IterationCount= " 5 " />

Advertencia : al usar animaciones repetidas, no puede establecer una animación Secondary en el elemento.

Es importante tener en cuenta que todas las animaciones de XamlFlair son animaciones de "inicio" , en otras palabras, comienzan y solo se detienen cuando se completan (o cuando el elemento asociado descarga), excepto repetir animaciones. Se puede detener una animación repetida cuando se suministra un valor false a la propiedad PrimaryBinding (los enlaces están cubiertos en la siguiente sección):

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Cuando un false se establece en la vinculación, la iteración actual de la animación se ejecutará hasta que termine y luego la animación repetida se detendrá.

Eventos

Por defecto, todas las animaciones se ejecutan cuando el elemento animado dispara su evento Loaded . Este comportamiento se puede anular estableciendo la propiedad Event . Event puede ser cualquier evento expuesto del elemento animado. Por ejemplo, para ejecutar una animación en un botón cuando se hace clic, se puede usar el evento Click :

< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />

Algunos ejemplos de eventos comunes que se pueden usar:

• Cargado ( valor predeterminado )
• Visibilidad ( se desencadena solo cuando visibilidad == Visible )
• DataContextChanged ( dispara cuando el valor no es nulo )
• Punterover
• Pointerexit
• Gotfocus
• Lostfocus

Hay algunos casos especiales para tomar nota. El primer caso especial es el evento DataContextChanged . Al usar el evento DataContextChanged , se disparará cuando el valor de DataContext cambia, excepto los casos en que se establece un valor null , null se filtra y no activará una animación.

Otro caso especial es Visibility . Aunque no existe ninguna VisibilityChanged eventos en un FrameworkElement , la propiedad Visibility se ha tratado como un evento cuando el valor cambia, ya que puede ser útil animar un elemento cuando se vuelve visible en la interfaz de usuario. Si se activa una animación con Event=Visibility , solo se activará cuando se establece un valor de Visibile .

Ataduras

Uno de los valores más importantes para Event es None , que es un valor utilizado para cancelar cualquier disparador de animación basado en eventos. Al especificar None , deberá desencadenar manualmente sus animaciones utilizando las propiedades PrimaryBinding o SecondaryBinding . Estas propiedades son de tipo bool y esperan un valor de True para ejecutar la animación correspondiente. El siguiente es un ejemplo de activación de una animación basada en el control de la IsChecked de verificación:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

La animación anterior solo se ejecutará cuando el IsChecked sea True . Si no se especificara None para Event , la animación se ejecutaría en Loaded y en el enlace.

Al trabajar con PrimaryBinding y SecondaryBinding juntas (según el mismo valor booleano), puede ser más limpio y simple de usar CombinedBinding . CombinedBinding simplemente actúa como PrimaryBinding y SecondaryBinding juntas. En lugar de lo siguiente:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.SecondaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox, Converter={StaticResource InverseBoolConverter}} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Lo usarías como tal:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.CombinedBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Al usar CombinedBinding de esta manera, ahorra tener que usar un convertidor para el valor booleano inverso, que se maneja internamente.

Comandos de finalización primaria y secundaria

Puede haber escenarios en los que desee ejecutar un ICommand cuando se complete una animación. En tal caso, existen dos propiedades: PrimaryCompletionCommand y SecondaryCompletionCommand .

En el siguiente ejemplo, el comando llamado MyCustomCommand se ejecutará una vez que se complete la animación principal:

< TextBlock Text = " Example of a completion command "
           xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
           xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />

Usando la propiedad StartWith

Habrá casos en los que necesitará que su elemento UI comience en un estado específico, por ejemplo, el elemento debe reducirse antes de que se ejecute su animación. Esto se logra utilizando la propiedad StartWith :

< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
           xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " />

En el ejemplo anterior, dado que el elemento se está escalando desde la parte inferior, pero con un retraso, debemos comenzar en la posición escalada , por lo que usamos la propiedad StartWith para establecer su estado inicial. Lo que esencialmente hace StartWith es configurar los valores iniciales en el elemento tan pronto como se haya cargado.

Uso de la propiedad AllowOpacityReset ( solo WPF )

La documentación de .NET establece lo siguiente:

En algunos casos, puede parecer que no puede cambiar el valor de una propiedad después de haber sido animado. ... Debes evitar que la animación influya en la propiedad.

Puede haber casos en los que animas la opacidad, en los que la animación de opacidad restablece repentinamente su valor en lugar de animar, o no se comporta con la intención. En los casos, es posible que deba establecer AllowOpacityReset = False ( el valor predeterminado de AllowOpacityReset es True ) para lograr el comportamiento previsto:

< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
       xf:Animations.AllowOpacityReset= " False "
       Source = " /Assets/... " />

Uso de la propiedad ClipToBounds ( UWP y UNO solamente )

Una propiedad útil que existe en WPF, ClipToBounds es una propiedad útil que existe en WPF, pero desafortunadamente no en UWP. Por lo tanto, se ha agregado en XAMLFLAIR debido a su facilidad de uso y práctica. Para recortar contenido infantil a los límites del elemento que contiene, simplemente establezca ClipToBounds en True en el elemento de contenido:

< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border >

Animaciones de depuración

Para depurar una animación y entrar en el código, use la propiedad EnableDebugging . La depuración es posible debido a la inclusión de la biblioteca Sourcelink. Asegúrese de hacer lo siguiente:

< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Las siguientes tablas explican los valores de enumeración:

Valor de enum	Descripción
None	Valor predeterminado. No se producirá depuración.
InitializeElement	Rompe el depurador en la función InitializeElement de XAMLFLAIR.
RunAnimation	Rompe el depurador en la función RunAnimation de XAMLFLAIR.

Animaciones de registro

La biblioteca XAMLFLAIR abstrae su registro utilizando Microsoft.Extensions.Logging.Abstractions . A continuación se muestra un ejemplo de registro usando serilog en una aplicación UWP:

 public App ( )
{
    this . InitializeComponent ( ) ;
    .
    .
    .
    // Setup the Serilog logger
    Log . Logger = new LoggerConfiguration ( )
        . MinimumLevel . Debug ( )
        . WriteTo . Debug ( )
        . CreateLogger ( ) ;

    // Initalie the XamlFlair loggers using the LoggerFactory (with Serilog support)
	XamlFlair . Animations . InitializeLoggers ( new LoggerFactory ( ) . AddSerilog ( ) ) ;
}

Para obtener los valores de una o más animaciones, simplemente establezca Debug en la propiedad EnableLogging en el FrameworkElement de destino:

< Rectangle xf:Animations.EnableLogging= " Debug "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Hacerlo le proporcionará la siguiente salida de consola similar (difiere ligeramente para WPF):

 Element = Windows.UI.Xaml.Controls.Button
Kind = FadeFrom, TranslateFrom
TargetProperty = Translation
Duration = 500
Delay = 0
Opacity = 0
OffsetX = 0
OffsetY = 50
OffsetZ = 0
ScaleX = 1
ScaleY = 1
ScaleZ = 1
Rotation = 0
Blur = 0
TransformCenterPoint = 0.5,0.5
Easing = Cubic
EasingMode = EaseOut

A medida que se ejecuta cada guión gráfico, se mantiene en una lista interna hasta que se completa (o se detiene). Para obtener esta lista interna, agregue temporalmente lo siguiente en el código de inicio de su aplicación:

 Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;

Hacerlo le proporcionará la siguiente salida de consola similar:

 ---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:43222

Element = Button,  Key = d69f826a-1978-4a4e-b516-4a6b0469238b,  ElementGuid = 195d8c13-1dd7-4fef-a7f3-fc78bdab1cd7
    State = Running,  IsSequence = False,  IsIterating = False,  IterationBehavior = Count,  IterationCount = 0
------------------------------------

---------- ACTIVE TIMELINE --------
Guid d69f826a-1978-4a4e-b516-4a6b0469238b - Updated state to: Completed at 12:42:26:88616
------------------------------------

---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:89614

NO ACTIVE TIMELINES!
------------------------------------

Actualmente, todo el registro en XAMLFLAIR mencionado anteriormente se registra en LogLevel.Debug

Animaciones ListViewBase ( UWP y UNO ) y ListBox ( WPF )

Para implementar correctamente las animaciones de elementos en los elementos de la lista, no fue suficiente simplemente crear propiedades adjuntas en los controles ListViewBase (UWP) y ListBox (WPF). En su lugar, se crearon controles heredados: AnimatedListView y AnimatedGridView para UWP, y AnimatedListView y AnimatedListBox para WPF, todos disponibles en el espacio de nombres XamlFlair.Controls :

Espacio de nombres UWP y UNO:

xmlns:xfc="using:XamlFlair.Controls"

Espacio de nombres de WPF:

xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF"

Animar elementos en las listas es ligeramente diferente a animar un elemento de interfaz de usuario típico. La razón principal de esta diferencia es que el valor Event en las AnimationSettings correspondientes no se puede cambiar desde su valor predeterminado. Por lo tanto, lo siguiente no es válido :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " />

Lista de animaciones de elementos, de forma predeterminada , animada en función del evento Loaded de cada elemento visible , y también en función de una actualización de la propiedad ItemsSource del control de la lista. Para deshabilitar estos comportamientos predeterminados, las siguientes dos propiedades se pueden usar de forma independiente:

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      ... />

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnItemsSourceChange= " False "
                      ... />

Por defecto, las animaciones de elementos tienen un retraso de 25 milisegundos entre cada elemento. Este valor se puede cambiar utilizando la propiedad InterElementDelay :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.InterElementDelay= " 50 "
                      ... />

Al igual que PrimaryBinding y SecondaryBinding , las animaciones de los elementos pueden activarse mediante un enlace con el uso de la propiedad ItemsBinding : la propiedad:

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />

ADVERTENCIA ( solo UWP ) : Tenga en cuenta que si tiene algún ItemContainerTransitions establecida en AnimatedListView o AnimatedGridView , se borrarán. Esto se hace para evitar animaciones de elementos conflictivas.

Nota ( solo UNO ) : para evitar cualquier parpadeo en las animaciones de los elementos, actualmente existe una restricción: la animación Items debe contener un FadeFrom .