Blur

The Blur animation behavior selectively blurs a XAML element by increasing or decreasing pixel size. Sometimes you want an element to appear slightly out of focus, but to be familiar to the user from other locations within an app. Rather than having to rasterize the XAML into an image and apply a blur, you can apply a BlurBehavior to the original element at run time.

NOTE: This animation REQUIRES the Windows 10 Anniversary SDK 14393 10.0.14393.0 in order for it to work.

Syntax

You can either use the blur behavior from your XAML code:


    <interactivity:Interaction.Behaviors>
    <behaviors:Blur x:Name="BlurBehavior" 
           Value="10" 
           Duration="500" 
           Delay="250" 
           AutomaticallyStart="True"/>
    </interactivity:Interaction.Behaviors>

or directly from code:


ToolkitLogo.Blur(value: 10, duration: 500, delay: 250);       

Properties

Property Name Type Description
Value double The amount of Gaussian blur to apply to the pixel
Duration double The number of milliseconds the animation should run for
Delay double The number of milliseconds before the animation is started

Chaining animations

Behavior animations can also be chained and awaited.


    Element.Rotate(value: 30f, duration: 0.3).StartAsync();

    await Element.Rotate(value: 30f, duration: 0.3).StartAsync();

    var anim = element.Rotate(30f).Fade(0.5).Blur(5);
    anim.SetDurationForAll(2);
    anim.Completed += animation_completed;
    anim.StartAsync();

    anim.Stop();

Blur Behavior Sample Page Source

Example Image

Blur Behavior animation

Requirements (Windows 10 Device Family)

Device family Universal, Windows 10 Anniversary SDK 14393 10.0.14393.0
Namespace Microsoft.Toolkit.Uwp.UI.Animations

API