Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 2 minutos
xaml-flair

Crea animaciones en WPF con XamlFlair

XamlFlair es una biblioteca de código abierto para aplicaciones WPF, UWP y UNO que facilita enormemente la creación de animaciones sofisticadas a tus interfaces de usuario.

Con XamlFlair es muy sencillo crear animaciones complejas y personalizadas en XAML y C#, sin necesidad de escribir el código normal (que generalmente es bastante tedioso).

XamlFlair funciona mediante la definición de animaciones utilizando XAML y C# como recursos de la aplicación. Podemos crear nuestras propias animaciones, o emplear alguna de las predefinidas (solo en WPF).

Posteriormente, únicamente tenemos que aplicar la animación al objeto que queramos animar.

Cómo usar XamlFlair

Podemos agregar fácilmente XamlFlair a nuestro proyecto a través de un paquete NuGet. Simplemente tenemos que añadir el paquete correspondiente con nuestro tipo de proyecto. Por ejemplo, para WPF,

Install-Package XamlFlair.WPF

Ahora, añadimos el namespace XamlFlair en la cabecera de nuestro fichero Xaml.

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

Y añadimos las animaciones predefinidas como recursos

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <xf:XamlFlairResources />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
<Border xf:Animations.Primary="{StaticResource FadeIn}" />

Animaciones custom

Además de las animaciones predefinidas, podemos crear nuestras propias animaciones

[<xf:AnimationSettings x:Key="PerspectiveVerticalRotation"
                      Kind="SwivelYFrom"
                      SwivelY="-45" />](<%3CPage.Resources%3E
		<cor:Double x:Key="PopupScaleFactor">0.5</cor:Double>

		<xf:AnimationSettings x:Key="FadeInAndContractAndBlur"
							  Kind="FadeFrom,ScaleXFrom,ScaleYFrom,BlurTo"
							  Opacity="0"
							  ScaleX="{StaticResource LargeScaleFactor}"
							  ScaleY="{StaticResource LargeScaleFactor}"
							  BlurRadius="12" />
	</Page.Resources>>)

Y después la podríamos emplar de la siguiente forma

	<Image Source="{Binding Image}"
			   Stretch="UniformToFill"
			   xf:Animations.Primary="{xf:Animate BasedOn={StaticResource FadeInAndContractAndBlur}, Duration=2000}" />

Animaciones combinadas

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

Sobreescribir parámetros

También es posible sobreescribir los valores de la animación que hemos definido como recurso directamente al aplicar la animación al elemento.

Por ejemplo,

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

Eventos

Por defecto las animaciones se ejecutan durante el evento Loaded. Lo cuál no siempre será lo que queramos. Es posible cambiar el disparo de la animación a los siguientes eventos,

  • Loaded (default value)
  • Visibility (triggers only when Visibility == Visible)
  • DataContextChanged (triggers when the value is not null)
  • PointerOver
  • PointerExit
  • GotFocus
  • LostFocus

Binding

Cuando ninguno de los eventos sean adecuados a nuestras necesidades, tenemos la opción más potente de vincular la animación al cambio de una variable bindeada.

Por ejemplo,

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

Disparara la animación cuando la variable Animate sea true.

Adicionalmente, también es posible lanzar un comando cuando se finaliza la ejecución.

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

Como vemos, es una biblioteca muy potente para realizar animaciones de forma sencilla, y sin necesidad de demasiado código.

La librería tiene muchas más opciones, que están detalladas en la documentación del proyecto. También se proporcionan proyectos de ejemplo para WPF, UWP y UNO.

XamFlair es Open Source y todo el código se encuentra disponible en la página web del proyecto GitHub - XamlFlair/XamlFlair: XamlFlair is an animation library for UWP, WPF, and Uno, built to facilitate Xaml animations using only attached properties.

En esta página