Skip to content

Latest commit

 

History

History
134 lines (100 loc) · 5.07 KB

Saturation.md

File metadata and controls

134 lines (100 loc) · 5.07 KB
Raw
title author description keywords dev_langs
Saturation animation behavior
nmetulev
The Saturation animation behavior selectively saturates a XAML element.
windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, saturation animation, saturation
csharp
vb

Saturation

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.

[!div class="nextstepaction"] 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

Related Topics