Create animations in WPF with XamlFlair

XamlFlair is an open-source library for WPF, UWP, and UNO applications that greatly simplifies the creation of sophisticated animations for your user interfaces.

With XamlFlair, it’s very easy to create complex and customized animations in XAML and C#, without the need to write the usual, often quite tedious, code.

XamlFlair works by defining animations using XAML and C# as application resources. We can create our own animations, or use some of the predefined ones (WPF only).

Later, we simply need to apply the animation to the object we want to animate.

How to use XamlFlair

We can easily add XamlFlair to our project through a NuGet package. We just need to add the corresponding package for our project type. For example, for WPF,

Install-Package XamlFlair.WPF

Now, add the XamlFlair namespace to the header of our XAML file.

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

And add the predefined animations as resources

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

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

Custom Animations

In addition to the predefined animations, we can create our own animations

<xf:AnimationSettings x:Key="PerspectiveVerticalRotation"
                      Kind="SwivelYFrom"
                      SwivelY="-45" />
    <Page.Resource>
		<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>

And then we could use it as follow

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

Combined Animations

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

Overriding Parameters

It’s also possible to override the values of the animation we have defined as a resource directly when applying the animation to the element.

For example,

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

Events

By default, the animations are executed during the Loaded event. Which will not always be what we want. It’s possible to change the animation trigger to the following events,

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

Binding

When none of the events are suitable for our needs, we have the most powerful option of binding the animation to the change of a bound variable.

For example,

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

It will trigger the animation when the Animate variable is true.

Additionally, it’s also possible to execute a command when the execution is completed.

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

As we can see, it’s a very powerful library for easily animating, without the need for too much code.

The library has many more options, which are detailed in the project’s documentation. Example projects for WPF, UWP, and UNO are also provided.

XamFlair is Open Source and all the code is available on the project’s website GitHub - XamlFlair/XamlFlair: XamlFlair is an animation library for UWP, WPF, and Uno, built to facilitate Xaml animations using only attached properties.