Platform	Package	NuGet
UWP	XamlFlair.UWP
WPF	XamlFlair.WPF
Uno	XamlFlair.Uno

Use the following command to download XamlFlair from the Package Manager Console:

UWP:

Install-Package XamlFlair.UWP

Your application must target Windows 10 version 1809 (build 17763) or higher.

WPF:

Install-Package XamlFlair.WPF

Uno:

Install-Package XamlFlair.Uno

Your UWP application must target at least Windows 10 version 1809 (build 18362).

The basic concept of XamlFlair is based on From and To animations. Any UI element composed of From animations will start with one or more arbitrary values and complete using the default values of the corresponding properties. Any UI element composed of To animations will start from its current state and be set to one or more arbitrary values.

Example of a From animation (a UI element moving to Translation(0)):

Example of a To animation (a UI element sliding out from its current state):

Note: It is important to note that there is an exception to this rule for color animations, which is explained in the "Base Animation Types" section.

First, add the following XAML namespace reference:

UWP and Uno:

xmlns:xf="using:XamlFlair"

WPF:

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

Add the attached property to any FrameworkElement that needs animation:

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

Note: If the FrameworkElement has a CompositeTransform defined in XAML, it will be changed during the animation.

Note: The use of StaticResource refers to a globally common animation, which will be discussed in the next section.

Fade

Warning: Be careful when setting FadeTo animations, because if the Visibility is Visible, the element will remain in the visual tree. In some cases, you may need to manage IsHitTestVisible manually to allow users to click the element.

Translate

Scale

Rotate

Blur (UWP and WPF only)

Saturate (UWP only)

Tint (UWP only)

Color (WPF and Uno only)

Note: It is important to note that when using From animations for color animations, the color will be set from the specified value to its current state, not the default value.

Swivel (UWP only)

When using color animations, it is important to note that they are slightly different from other base animation types. When using ColorTo and ColorFrom, the following must be done:

• Only the following properties can be animated: Control.Background, Control.Foreground, Control.BorderBrush, Border.Background, Border.BorderBrush, TextBlock.Foreground, Shape.Fill, Shape.Stroke
• Ensure a brush is set on the corresponding property to be animated
• The target property must also be specified using ColorOn

The following example will animate the Fill property of a Rectangle from RoyalBlue to DarkGreen:

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

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

If you need to globally change one of the default animation values (for example, change the default Duration to 750 instead of 500), you can call the OverrideDefaultSettings function in your application's initialization code. The following example changes the default values for Duration and Easing:

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

Thus, in the example code above, every animation will run for 750ms with a quadratic easing.

All common animations should be placed in a global ResourceDictionary (e.g., Animations.xaml) and referenced in the application when needed. The goal is to consolidate all animations into a single file with meaningful names so that any developer can understand exactly what animation will be applied to the FrameworkElement. Here's a small example:

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

To use this pre-configured set of AnimationSettings in your application, follow these steps:

1. Right-click on your project in Solution Explorer, then click Add > New Item...
2. Select Resource Dictionary and name it Animations.xaml
3. Add the following to App.xaml:

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

4. In Animations.xaml, copy and paste the content from the appropriate link below:

In addition to creating a custom ResourceDictionary with AnimationSettings, XamlFlair also provides some default animations.

To reference these default animations in your application, follow these steps in App.xaml:

1. Add the XamlFlair.WPF namespace at the top:

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

2. Update the Application Resources:

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

Your application now has a set of global default animations ready to use.

If Visual Studio IntelliSense is not working when using <xf:XamlFlairResources />, you may need to try the following:

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

The RenderTransform can be animated using the TransformOn property. Available options are Render and Layout. When unspecified, it defaults to Render. Here's an example of both options: