Edit

Share via

Saturation

Warning

This behavior is no longer available in the Windows Community Toolkit. Please use the effects from the Microsoft.Toolkit.Uwp.UI.Media package and the helpers such as the PipelineVisualFactory type.

The Saturation animation selectively saturates a XAML element. Saturation animation is applied to all the XAML elements in its parent control/panel. Saturation animation doesn't affect the functionality of the control.

Try it in the sample app

Syntax

<Page ...
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"  
    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"/>

<interactivity:Interaction.Behaviors>
    <behaviors:Saturation x:Name="SaturationBehavior" 
           Value="0" 
           Duration="2500" 
           Delay="250" 
           EasingType="Linear"
           AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>

MyUIElement.Saturation(value: 0.5, duration: 500, delay: 250).Start();
await MyUIElement.Saturation(value: 0.5, duration: 500, delay: 250).StartAsync();  //Saturation animation can be awaited

ToolkitLogo.Saturation(value:=0, duration:=500, delay:=250)

Sample Output

Saturation Behavior animation

Properties

Property Type Description
Value float The value of saturation. 0 is desaturated, 1 is saturated.
Duration double The duration in milliseconds
Delay double The delay for the animation to begin

Methods

Methods Return Type Description
Saturation(AnimationSet, Double, Double, Double) AnimationSet Saturates the FrameworkElement
Saturation(FrameworkElement, Double, Double, Double) AnimationSet Saturates the FrameworkElement

Examples

  • Sometimes you want an element to desaturate, a common example of this could be when you mouse over a UI Element, now you can apply a SaturationBehavior to the original element at run time.

    Sample Code

    private void MyUIElement_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    MyUIElement.Saturation(value: 1).Start();
}

private void MyUIElement_PointerExited(object sender, PointerRoutedEventArgs e)
{
    MyUIElement.Saturation(value: 0).Start();
}

    Private Sub MyUIElement_PointerEntered(sender As Object, e As PointerRoutedEventArgs)
    MyUIElement.Saturation(value:=1).Start()
End Sub

Private Sub MyUIElement_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    MyUIElement.Saturation(value:=0).Start()
End Sub

    Sample Output

    Use Case 1 Output

  • Use this to create chaining animations with other animations. Visit the AnimationSet documentation for more information.

    Sample Code

    var anim = MyUIElement.Light(5).Offset(offsetX: 100, offsetY: 100).Saturation(0.5).Scale(scaleX: 2, scaleY: 2);
anim.SetDurationForAll(2500);
anim.SetDelay(250);
anim.Completed += animation_completed;
anim.Start();

    Dim anim = MyUIElement.Light(5).Offset(offsetX:=100, offsetY:=100).Saturation(0.5).Scale(scaleX:=2, scaleY:=2)
anim.SetDurationForAll(2500)
anim.SetDelay(250)
AddHandler anim.Completed, AddressOf animation_completed
anim.Start()

    Sample Output

    Use Case 2 Output

Sample Project

Saturation Behavior Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Animations
NuGet package Microsoft.Toolkit.Uwp.UI.Animations

API

  • Last updated on