Create animations in WPF with XamlFlair

XamlFlair is an open-source library for WPF, UWP, and UNO applications that greatly facilitates creating sophisticated animations for your user interfaces.

With XamlFlair, it’s very easy to create complex and custom animations in XAML and C#, without needing to write the usual code (which is generally quite tedious).

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 (only in WPF).

Afterwards, we only have to apply the animation to the object we want to animate.

How to use XamlFlair

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

Now, we add the XamlFlair namespace in 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 in the following way

	<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}" />

Override Parameters

It is also possible to override the values of the animation we 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, animations run during the Loaded event. Which may not always be what we want.

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}" />

Will trigger the animation when the variable Animate is true.

Additionally, it is also possible to launch a command when the execution finishes.

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

As we can see, it is a very powerful library for performing animations easily, and without the need for too much code.

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

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