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.
- ListView, GridView, and GroupItem: each of these controls has both ContentThemeTransition and EntranceThemeTransition as values for the ItemContainerTransitions property, applied by the default Style. (They also have AddDeleteThemeTransition and ReorderThemeTransition). For more info see ListView styles and templates and GridView styles and templates.
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.
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