Edit

Light

  • Article

Note

The Light effect has been removed from the Windows Community Toolkit. Please use XAML lighting instead.

The Light animation behavior performs a point light (A point source of light that emits light in all directions) in the middle of a given UIElement. You set the distance property of the light to determine how bright the light will be. The closer the light source, the darker the UI element will be.

Note

Heavy usage of effects may have a negative impact on the performance of your application.

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:Light x:Name="LightBehavior" 
           Distance="10" 
           Duration="500" 
           Delay="0"
           EasingType="Linear"
           AutomaticallyStart="True"
           Color="Red"/>
</interactivity:Interaction.Behaviors>

MyUIElement.Light(distance: 5, duration: 2500, delay: 250, color: Colors.Red).Start();
await MyUIElement.Light(distance: 5, duration: 2500, delay: 250, color: Colors.Red).StartAsync(); //Light animation can be awaited

MyUIElement.Light(distance:=5, duration:=2500, delay:=250, color:=Colors.Red).Start()
Await MyUIElement.Light(distance:=5, duration:=2500, delay:=250, color:=Colors.Red).StartAsync()  ' Light animation can be awaited

Sample Output

Light Behavior animation

Properties

Property Type Description
Color Brush The color of the spot light
Delay double The delay for the animation to begin
Distance double The distance of the spotlight. 0 being the furthest.
Duration double The duration in milliseconds

Methods

Methods Return Type Description
Light(AnimationSet, Double, Double, Double) AnimationSet Animates a point light and it's distance
Light(FrameworkElement, Double, Double, Double) AnimationSet Animates a point light and it's distance

Examples

  • The light behavior is great at drawing the user's eye towards a particular pieces of user interface. Closer the light source, the more focused it will be, but, will make the overall UI element darker. The further away from the light source the more the light will spread over the UIElement.

  • 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 1 Output

Sample Project

Light 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