Animating fades (XAML)
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.
Note
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
- AppBar and CommandBar: these both use FadeInThemeAnimation and FadeOutThemeAnimation whenever they show or hide, as part of the "FloatingVisible" and "FloatingHidden" visual states.
- GridViewItem and ListViewItem: both include FadeInThemeAnimation and FadeOutThemeAnimation as part of visual states for multi-item selection and drag.
- ProgressBar: uses a FadeInThemeAnimation in a VisualTransition that applies when the control leaves the "Indeterminate" state, and FadeOutThemeAnimation as an animation for a content part within that state.
- ScrollBar: includes FadeInThemeAnimation and FadeOutThemeAnimation when the ScrollBar shows or hides because of an associated scrolling area's logic. There are also FadeInThemeAnimation and FadeOutThemeAnimation behaviors associated with displaying scrolling indicators for touch or the mouse. ScrollBar is then included as a part in a number of other control templates.
- ScrollViewer: uses fades for the scrollbar separator
- On Windows, SemanticZoom: uses FadeInThemeAnimation and FadeOutThemeAnimation when changing between the ZoomedInView content and the ZoomedOutView content and vice versa. There are also fades applied to the zoom-in or zoom-out button if it is present.
- On Windows, ToolTip: uses FadeInThemeAnimation for its "Opened" visual state and FadeOutThemeAnimation for its "Closed" visual state.
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.