Language: HTML | XAML

Animating fades (XAML)

Applies to Windows and Windows Phone

Use fade animations to bring items into a view or take items out of a view. There are three types of fade animations: fade in, fade out, and crossfade. Each animation is designed for a different scenario. The XAML animation library implements these animations using FadeInThemeAnimation and FadeOutThemeAnimation.

Fade in

Use the fade in animation to bring an item or set of items into place. An example of the fade in animation can be seen in the app bar, where new controls can appear as the result of user interaction. You should also use the fade in animation to transition from a placeholder item to the actual item as content dynamically loads, or to show a custom tooltip or dialog control.

  • Applies to Windows

Note that the Windows tooltip and dialog controls include the fade in and fade out animations.

Fade out

Use the fade out animation to remove an item or set of items from view. An example of the fade out animations can be seen in transient controls such as the scroll bar or panning indicator, which are faded out after a period of time has elapsed and no user input has been detected.

Crossfade

Use the fade in and fade out animations simultaneously to perform an in-place replacement of an existing item with an incoming item. The animation fades the existing items away as it fades the replacement items into the same space.

Fade animations in default Windows Runtime control behavior

Other resources

See Guidelines and checklist for fade animations for design best practices in the use of these animations.

For a sample that uses HTML rather than XAML, see Using the Animation Library animations sample.

Related topics

Animating your UI
Quickstart: Animating your UI using library animations
FadeInThemeAnimation
FadeOutThemeAnimation
XAML personality animations sample

 

 

Show:
© 2014 Microsoft