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.
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);
|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|
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();
Requirements (Windows 10 Device Family)
|Device family||Universal, Windows 10 Anniversary SDK 14393 10.0.14393.0|