Saturation

• 11/13/2019
• 2 minutes to read
• • 
  • 
  • 

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.

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

Properties

Methods

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

  

Sample Project

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

Requirements

API

• Saturation source code

Related Topics

• AnimationSet Class
• SaturationEffect Class