Animating content and entrance transitions (XAML)

Use content transition animations to change the content of an area of the screen, while the container or background doesn't change. New content that comes onto the screen slides in from an offset as it fades in. If there is existing content to be replaced, the old content is faded out as the new content comes in. You might use this in the case of split-screen navigation, where the user is shown a list and a detailed view. Content transition animations also bring content into view that loads after the rest of a page, when the user transitions between pages.

This animation is performed by the ContentThemeTransition class.

The XAML animation library doesn't have a concept of an animation that applies to the entire page when the page is loaded, but it does have a separate transition (EntranceThemeTransition) that can apply to content when the page containing the content is first loaded and that part of content is rendered. In other words there is no direct equivalent for enterPage, but applying EntranceThemeTransition to content within a page addresses the same scenario and triggers for the same condition. In XAML a content element might have both a ContentThemeTransition and EntranceThemeTransition defined as part of the same TransitionCollection applied to a Transition property. That way the content will have different visual feedback when it's first loaded than when it's subsequently changed on the page but the page remains the same.

Content and entrance animations in default Windows Runtime control behavior

For content that remains in place but where there can be user-driven or data-driven changes to items, you should also apply AddDeleteThemeTransition and ReorderThemeTransition animations wherever you apply ContentThemeTransition.

Note  Starting with Windows 8.1, theme transitions and visual state transitions are disabled by the system, if the user engages an Ease of Access setting that turns off unnecessary animations (when possible) in Windows apps.

 

Other resources

The XAML personality animations sample shows how to use ContentThemeTransition applied to the ChildrenTransitions property of a Grid. The sample shows a master-details view of data where the detail is shown in a right-side grid cell, and the animation is applied when a new item is selected among the items on the left side of the grid. (This is Scenario 2 in the sample.)

For more info on UX and usage guidance, see Guidelines and checklist for page transition animations and Guidelines and checklist for content transition animations.

Animating your UI

Quickstart: Animating your UI using library animations

XAML personality animations sample

Animating list additions and deletions

Adding ListView and GridView controls

ContentThemeTransition

EntranceThemeTransition