In a previous post I’ve talked about some page transitions and animations within Windows apps. There are many other locations where adding animations is very easy. One of these is animating items within any ItemsControl class. This includes controls like the ListView/GridView controls. The ItemsControl exposes the ItemContainerTransitions property. This property exposes a TransitionCollection, the same collection I talked about in the previous post. One of the key transitions you’ll want to look at is the EntranceThemeTransition.
The EntranceThemeTransition defines how items will enter the region when they are rendered. It contains three properties. FromVerticalOffset and FromHorizontalOffset define the where the item should start rendering, with respect to where the final location will be. So if you have a FromVerticalOffset of 100, the item will begin an entrance animation 100 pixels below where it will end. The last property IsStaggeringEnabled, defines if all items should animate at once, or if the animation should be staggered. I really like setting this to true for some great animations.
Here are some examples of using the EntranceThemeTransition to animate items.
Animate a list of items from the right
Set FromVerticalOffset to 0, and FromHorizontalOffset to your desired value.
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True"
FromVerticalOffset="0"
FromHorizontalOffset="200"/>
<AddDeleteThemeTransition/>
<NavigationThemeTransition/>
<ContentThemeTransition/>
</TransitionCollection>
</ListView.ItemContainerTransitions>
Animate a list of items from the bottom
Set FromHorizontalOffset to 0, and FromVerticalOffset to your desired value.
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True"
FromVerticalOffset="200"
FromHorizontalOffset="0"/>
<AddDeleteThemeTransition/>
<NavigationThemeTransition/>
<ContentThemeTransition/>
</TransitionCollection>
</ListView.ItemContainerTransitions>
Animate a list of items diagonally
Set both FromVerticalOffset and FromHorizontalOffset to your desired value.
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True"
FromVerticalOffset="200"
FromHorizontalOffset="200"/>
<AddDeleteThemeTransition/>
<NavigationThemeTransition/>
<ContentThemeTransition/>
</TransitionCollection>
</ListView.ItemContainerTransitions>
Animate a grid of items from the left
Set FromVerticalOffset to 0, and FromHorizontalOffset to a negative value.
<GridView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True"
FromVerticalOffset="0"
FromHorizontalOffset="-200"/>
<AddDeleteThemeTransition/>
<NavigationThemeTransition/>
<ContentThemeTransition/>
</TransitionCollection>
</GridView.ItemContainerTransitions>
Play with the EntranceThemeTransition and come up with some great animations!