title | author | description | keywords | dev_langs | ||
---|---|---|---|---|---|---|
Fade animation behavior |
nmetulev |
The Fade animation behavior fades objects, in and out, over time and delay. It can be used along side other animations directly through XAML or code (outdated docs). |
windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, fade, fade animation |
|
Warning
This behavior is no longer available in the Windows Community Toolkit. Please use the effects from the Microsoft.Toolkit.Uwp.UI.Media
package and the helpers such as the PipelineVisualFactory
type.
The Fade animation fades objects, in and out, over time. Fade animation is applied to all the XAML elements in its parent control/panel. Fade animation doesn't affect the functionality of the control.
[!div class="nextstepaction"] Try it in the sample app
<Page ...
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"/>
<interactivity:Interaction.Behaviors>
<behaviors:Fade x:Name="FadeBehavior"
Value="0.5"
Duration="2500"
Delay="250"
EasingType="Linear"
AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>
MyUIElement.Fade(value: 0.5f, duration: 2500, delay: 250, easingType: EasingType.Default).Start();
await MyUIElement.Fade(value: 0.5f, duration: 2500, delay: 250, easingType: EasingType.Default).StartAsync(); //Fade animation can be awaited
MyUIElement.Fade(value:=0.5F, duration:=2500, delay:=250, easingType:=EasingType.[Default]).Start()
Await MyUIElement.Fade(value:=0.5F, duration:=2500, delay:=250, easingType:=EasingType.[Default]).StartAsync() ' Fade animation can be awaited
Property | Type | Description |
---|---|---|
Value | float | The fade value, between 0 and 1 |
Duration | double | The duration in milliseconds |
Delay | double | The delay for the animation to begin |
EasingType | EasingType | Used to describe how the animation interpolates between keyframes |
You can change the way how the animation interpolates between keyframes by defining the EasingType.
Methods | Return Type | Description |
---|---|---|
Fade(AnimationSet, Single, Double, Double, EasingType) | AnimationSet | Animates the opacity of the the UIElement |
Fade(UIElement, Single, Double, Double, EasingType) | AnimationSet | Animates the opacity of the the UIElement |
-
Use this to create chaining animations with other animations. Visit the AnimationSet documentation for more information.
Sample Code
var anim = MyUIElement.Fade(0.5f).Blur(5).Rotate(30); anim.SetDurationForAll(2500); anim.SetDelay(250); anim.Completed += animation_completed; anim.Start();
Dim anim = MyUIElement.Fade(0.5F).Blur(5).Rotate(30) anim.SetDurationForAll(2500) anim.SetDelay(250) AddHandler anim.Completed, AddressOf animation_completed anim.Start()
Sample Output
Fade Behavior Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.
Device family | Universal, 10.0.16299.0 or higher |
---|---|
Namespace | Microsoft.Toolkit.Uwp.UI.Animations |
NuGet package | Microsoft.Toolkit.Uwp.UI.Animations |