Animating your UI (Windows Store apps using C#/VB/C++ and XAML)
You can integrate the Windows 8 look and feel into your Windows Store app by using the Windows-provided suite of animations discussed in this topic. This topic provides a summary of the animations and examples of typical scenarios where each is used.
Use of these predefined animations provides these benefits:
- Motions that align to Windows Store app animation principles
- Fast, fluid transitions between UI states that inform but do not distract the user
- Clearer visuals to show the user transitions within an app
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 and the other items in the list animate to their new positions, making room for the added item. This makes the action clear to the user in a way that instantaneous transitions do not.
Note that controls introduced in Windows 8 such as the ListView control, the FlipView control, the Flyout control, and the AppBar control all use these animations. By using these controls in your app, you can get the Windows Store app animations look and feel without having to program it yourself.
The animation set does not provide animations for every possible scenario. There are cases where you might wish to create a custom animation to reflect your brand. You should be thoughtful about where you diverge from the stock animations. Only do so if there is a well-defined reason, such as for a special brand moment or if there is no stock animation to suit your scenario.
For example code using the APIs discussed in this topic, see the XAML animation library sample and the Quickstart: Animating your UI.
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, the functions that execute them, and to see an example of the animation.
- Page transition: Animates the contents of a page into or out of view.
- Content transition: Animates one piece or set of content into or out of view.
- Fade in/out: Shows transient elements or controls.
- Crossfade: 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 into or out of view.
- Show/Hide panel: Slides large edge-based panels into or out of view.
- Add/Delete from list: Adds or deletes an item from a list.
- Start/End a drag or drag-between: Gives visual feedback during a drag-and-drop operation.
- Swipe hint: Hints that a tile supports the swipe interaction.
- Swipe select/deselect: Transitions a tile to a swipe-selected state.
Note The expand, peek, badge, and search list animations provided through the JavaScript library are not available for XAML.
Page transition
Page transitions animate the contents of a page into or out of a view. This includes showing the first page of the app after the splash screen, and transitioning between the pages of an app.
The following video demonstrates the animation that brings a page of content into view:
For more information on UX and usage guidance, see Guidelines and checklist for page transition animations.
Use this API to execute this animation:
Content transition
Use content transition animations to move a piece or a set of content into or out of the current view. Do not confuse the content transition animations, which involve elements on a page, with the page transition animations, which transition entire pages. 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 following video demonstrates the animations that remove existing content and then bring new content into view:
For more information on UX and usage guidance, see Guidelines and checklist for content transition animations.
Use this API to execute this animation:
Fade in/out
Use fade in and fade out animations to show or hide transient UI or controls. 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.
The following video demonstrates the animations that fade content into and out of view. Note the scroll bar that fades in and out at the bottom of the screen:
For more information on UX and usage guidance, see Guidelines and checklist for fade animations.
Use these APIs to execute this animation:
Crossfade
Use a crossfade animation to smooth the transition when an item's state is changing; for instance, when the app refreshes the current contents of a view. This set of animations does not supply a dedicated crossfade animation, but you can achieve the effect by using the fade in and fade out animations with overlapped timing.
The following video demonstrates the crossfade animation:
For more information on UX and usage guidance, see Guidelines and checklist for fade animations.
Use these APIs to execute this animation:
Pointer up/down
Use the pointer up and pointer down 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.
The following video demonstrates the pointer down and pointer up animations:
For more information on UX and usage guidance, see Guidelines and checklist for pointer click animations.
Use these APIs to execute this animation:
Reposition
Use the reposition animation to move an element into a new position. For example, moving the headers in a panorama view would utilize the reposition animation.
The following video demonstrates the reposition animation:
For more information on UX and usage guidance, see Guidelines and checklist for reposition animations.
Use one of these APIs to execute this animation:
Show/Hide popup
Use the show and hide popup animations to display or hide contextual UI on top of the current view. For example, a pop-up can show more detailed information about an item in an element. Use the show and hide popup animations when you show a custom context menu or flyout.
The following video demonstrates the animations that show and hide popup UI:
For more information on UX and usage guidance, see Guidelines and checklist for pop-up UI animations.
Use these APIs to execute this animation:
Show/Hide edge UI
Use the show and hide edge UI animations 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 bottom of the screen or a UI surface for errors and warnings at the top of the screen.
The following video demonstrates the animations that show and hide edge-based UI:
For more information on UX and usage guidance, see Guidelines and checklist for edge-based UI animations.
Use this API to execute this animation:
Show/Hide panel
Use the show and hide panel animations to show and hide a panel, which is large edge-based UI such as a custom keyboard or a task pane. Do not confuse these animations with the show and hide edge UI animations, which are used with small UI elements that make use of the edge as entry and exit points.
The following video demonstrates the animations that show and hide panels:
For more information on UX and usage guidance, see Guidelines and checklist for edge-based UI animations.
Use this API to execute this animation:
Add to/Delete from list
Use the add to and delete from list animations when you add or delete an item in an existing one-dimensional or two-dimensional list. The add to list animation will first reposition existing items in the list to make space for the new items, and then add the new items. The delete from list animation removes items from a list and, if necessary, repositions the remaining list items once the deleted items have been removed.
The following video demonstrates the animations that add and remove items from a list:
For more information on UX and usage guidance, see Guidelines and checklist for add and delete animations.
Use this API to execute this animation:
Drag start/end and Drag between enter/leave
Use the drag animations to give visual feedback when the user drags or drops an item. Use the drag start animation when a user begins to drag an item. Use the drag end animation when the user drops the item.
Optionally, you can use the drag between enter and leave animations to 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 drag between enter and drag between leave 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.
The following video demonstrates the animations associated with a drag-and-drop operation:
For more information on UX and usage guidance, see Guidelines and checklist for drag-and-drop animations.
Use these APIs to execute this animation:
Swipe hint
Use the swipe hint 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 tap 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.
The following video demonstrates the swipe animation:
For more information on UX and usage guidance, see Guidelines and checklist for swipe animations.
Use this API to execute this animation:
Swipe select/deselect
Use the swipe select animation to show that the tile has been selected, and to return the tile to its rest location. Use the swipe deselect animation when a selected tile is deselected using a swipe gesture.
The following video demonstrates the swipe select and deselect animations:
For more information on UX and usage guidance, see Guidelines and checklist for swipe animations.
Use this API to execute this animation:
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 system 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 creating apps using C#, C++, or VB
- HTML animation library sample
- Windows.UI.Xaml.Media.Animation namespace
Build date: 3/5/2013
