Animating your UI (XAML)
You can integrate the Windows look and feel into your app by using the library of animations discussed in this topic. This topic provides a summary of the animations and examples of typical scenarios where each is used.
The Windows Runtime controls for XAML include certain types of animations as built-in behaviors that come from an animation library. Controls such as the ListView control, the FlipView control, the Flyout control, and the AppBar control all use these animations as built-in behavior. By using these controls in your app, you can get the animated look and feel without having to program it yourself.
Animations from the Windows Runtime animation library provide these benefits:
- Motions that align to animation principles
- Fast, fluid transitions between UI states that inform but do not distract the user
- Visual behavior that indicates transitions within an app to the user
For example, when the user adds an item to a list, instead of the new item instantly appearing in the list, the new item animates into place. The other items in the list animate to their new positions over a short period of time, making room for the added item. The transition behavior here makes the control interaction more apparent to the user.
The animation library does not provide animations for every possible scenario. There are cases where you might wish to create a custom animation in XAML. For more info, see Storyboarded animations.
For example code using the APIs discussed in this topic, see the XAML animation sample, XAML personality animations sample, or Quickstart: Animating your UI using library animations.
Types of animations
The Windows Runtime animation system and the animation library serve the larger goal of enabling controls and other parts of UI to have an animated behavior. There are several distinct types of animations.
- Theme transitions are applied automatically when certain conditions change in the UI, involving controls or elements from the predefined Windows Runtime XAML UI types. These are termed theme transitions because the animations support the Windows look and feel, and define what all apps do for particular UI scenarios when they change from one interaction mode to another. The theme transitions are part of the animation library.
- Theme animations are animations to one or more properties of predefined Windows Runtime XAML UI types. Theme animations differ from theme transitions because theme animations target one specific element and exist in specific visual states within a control, whereas the theme transitions are assigned to properties of the control that exist outside of the visual states and influence the transitions between those states. Many of the Windows Runtime XAML controls include theme animations within storyboards that are part of their control template, with the animations triggered by visual states. So long as you're not modifying the templates, you'll have those built-in theme animations available for the controls in your UI. However, if you do replace templates, then you'll be removing the built-in control theme animations too. To get them back, you must define a storyboard that includes theme animations within the control's set of visual states. You can also run theme animations from storyboards that aren't within visual states and start them with the Begin method, but that's less common. Theme animations are part of the animation library.
- Visual transitions are applied when a control transitions from one of its defined visual states to another state. These are custom animations that you write, and are typically related to the custom template you write for a control and the visual state definitions within that template. The animation only runs during the time between states, and that's typically a short amount of time, a few seconds at most. For more info, see "VisualTransition" section of Storyboarded animations for visual states.
- Storyboarded animations are applied when they are specifically started by your app code, or by code that comes with a component like a control that you've included. Storyboarded animations can change the value of any Windows Runtime dependency property over time. Storyboarded animations aren't limited to UI scenarios; in fact it might be useful to think of them as a state machine technique, if you're familiar with that concept. A storyboarded animation is not limited to the transition time between visual states; it could be run at any time regardless of a control state change, and the animation can potentially run continuously. For more info, see Storyboarded animations. For more info about dependency properties and where they exist, see Dependency properties overview.
Animations available in the library
The following animations are supplied in the animation library. Click on the name of an animation to learn more about their main usage scenarios, how to define them, and to see an example of the animation.
- Content and entrance transition: Animates one piece or set of content into or out of view.
- Fade in/out, and crossfade: Shows transient elements or controls, or refreshes a content area.
- Pointer up/down: Gives visual feedback of a tap or click on a tile.
- Reposition: Moves an element into a new position.
- Show/hide popup: Displays contextual UI on top of the view.
- Show/hide edge UI: Slides edge-based UI, including large UI such as a panel, into or out of view.
- List item changes: Adds or deletes an item from a list, or reordering of the items.
- Drag/drop: Gives visual feedback during a drag-and-drop operation.
- Swipe gestures: Hints that a tile supports the swipe interaction, or indicates swipe-selected state
Note The expand, peek, badge, and search list animations provided through the JavaScript animation library are not available for XAML.
Windows 8 behavior
For Windows 8, XAML theme transitions and various other automatic animated behaviors in the animation library didn't honor a particular Microsoft Windows Ease of Access setting that enables users to turn off "unnecessary animations".
Starting with Windows 8.1, theme transitions, theme animations, and visual transitions all honor the Turn off all unnecessary animations (when possible) setting in Ease of Access. The animations won't run and the control state changes or visual changes are instantaneous.
If you migrate your app code from Windows 8 to Windows 8.1, you might want to test your animation behaviors with Turn off all unnecessary animations (when possible) setting enabled. Because some of these animations are controlled by storyboards, and because you sometimes chain up custom animations to start after visual transitions or theme animations are complete, the Turn off all unnecessary animations (when possible) setting might affect the timings of your animations. Also, if you've implemented something as a VisualTransition in a visual state rather than as a storyboarded animation, you might want to switch it to be a true custom animation, so that the Turn off all unnecessary animations (when possible) setting won't disable it.
Apps that were compiled for Windows 8 but running on Windows 8.1 continue to use the Windows 8 behavior for theme animations and visual transitions. However, theme transitions are disabled by the setting on Windows 8.1, even if an app is not recompiled.
Content transition and entrance transition
Use content transition animations (ContentThemeTransition) to move a piece or a set of content into or out of the current view. For example, the content transition animations show content that was not ready to display when the page was first loaded, or when the content changes on a section of a page.
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. Thus the first appearance of content can offer different feedback than a change to content does.
For more info, see Animating content and entrance transitions.
Fade in/out, and crossfade
Use fade in and fade out animations to show or hide transient UI or controls. In XAML these are represented as FadeInThemeAnimation and FadeOutThemeAnimation. One example is in an app bar in which new controls can appear due to user interaction. Another example is a transient scroll bar or panning indicator that is faded out after no user input has been detected for some amount of time. Apps should also use the fade in animation when they transition from a placeholder item to the final item as content loads dynamically.
Use a crossfade animation to smooth the transition when an item's state is changing; for example, when the app refreshes the current contents of a view. The XAML animation library does not supply a dedicated crossfade animation (no equivalent for crossFade), but you can achieve the same result using FadeInThemeAnimation and FadeOutThemeAnimation with overlapped timing.
For more info, see Animating fades.
Pointer up/down
Use the PointerUpThemeAnimation and PointerDownThemeAnimation animations to give the user feedback for a successful tap or click on a tile. For example, when a user clicks or taps down on a tile, the pointer down animation is played. Once the click or tap has been released, the pointer up animation is played.
For more info, see Animating pointer actions.
Reposition
Use the reposition animations (RepositionThemeAnimation or RepositionThemeTransition) to move an element into a new position. For example, moving the headers in a headerd items control uses the reposition animation.
For more info, see Animating repositions.
Show/hide popup
Use the PopInThemeAnimation and PopOutThemeAnimation when you show and hide a Popup or similar contextual UI on top of the current view. PopupThemeTransition is a theme transition that's useful feedback if you want to light dismiss a popup.
For more info, see Animating popup UI.
Show/hide edge UI
Use the EdgeUIThemeTransition animation to slide small, edge-based UI into and out of view. For example, use these animations when you show a custom app bar at the top or bottom of the screen or a UI surface for errors and warnings at the top of the screen.
Use the PaneThemeTransition animation to show and hide a pane or panel. This is for large edge-based UI such as a custom keyboard or a task pane.
For more info, see Animating edge-based UI.
List item changes
Use the AddDeleteThemeTransition animation to add animated behavior when you add or delete an item in an existing list. For add, the transition will first reposition existing items in the list to make space for the new items, and then add the new items. For delete, the transition removes items from a list and, if necessary, repositions the remaining list items once the deleted items have been removed.
There's also a separate ReorderThemeTransition that you apply if an item changes position in a list. This is animated differently than deleting an item and adding it in a new place with the associated delete/add animations.
For more info, see Animating list item changes.
Drag/drop
Use the drag animations (DragItemThemeAnimation, DragOverThemeAnimation) and drop animation (DropTargetItemThemeAnimation) to give visual feedback when the user drags or drops an item.
When active, the animations show the user that the list can be rearranged around a dropped item. It is helpful for users to know where the item will be placed in a list if it is dropped at the current location. The animations give visual feedback that an item being dragged can be dropped between two other items in the list and that those items will move out of the way.
For more info, see Animating drag-and-drop sequences.
Swipe gestures
Use the SwipeHintThemeAnimation animation to show that a tile supports the swipe interaction. Users can swipe downwards to select a tile. If a user does not know if they can swipe on a tile, a press and hold gesture on the tile will play the swipe hint animation to suggest that the user should interact with the tile through a swipe.
Use the SwipeBackThemeAnimation animation to show that the tile has been selected, and to return the tile to its rest location.
For more info, see Animating swipe gestures.
Using animations with custom controls
The following table summarizes our recommendations for which animation you should use when you create a custom version of these Windows Runtime controls:
| UI type | Recommended animation |
|---|---|
| Dialog box | FadeInThemeAnimation and FadeOutThemeAnimation |
| Flyout | PopInThemeAnimation and PopOutThemeAnimation |
| Tooltip | FadeInThemeAnimation and FadeOutThemeAnimation |
| Context menu | PopInThemeAnimation and PopOutThemeAnimation |
| Command bar | EdgeUIThemeTransition |
| Task pane or edge-based panel | PaneThemeTransition |
| Contents of any UI container | ContentThemeTransition |
| For controls or if no other animation applies | FadeInThemeAnimation and FadeOutThemeAnimation |
Related topics
Roadmap for Windows Runtime apps using C# or Visual Basic