One of the most known page transitions on Windows Phone is the feather (or staggered item) transition. This is the transition you see when opening the mail app and the messages feather, or stagger in. This animation is also seen on the home page on the phone when the tiles stagger in. You usually see this transition whenever there is a list of items shown by any of the built in apps. This transition was previously only available through toolkits like the Windows Phone Toolkit or Telerik’s toolkit. Now this transition is available out of the box for Windows Phone Runtime apps.
For background on page transitions in Windows Phone 8.1 Runtime apps, see my previous post.
To get started, simply create a new Windows Phone Runtime app. Page transitions are enabled by default for all Runtime apps! To use this transition, you’ll want to set the page transition to use the NavigationThemeTransition with the CommonNavigationTransitionInfo. Make sure to set IsStaggeringEnabled to true for the CommonNavigationTransitionInfo.
<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<CommonNavigationTransitionInfo IsStaggeringEnabled="True"/>
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>
Next, you’ll want to add the CommonNavigationTransitionInfo.IsStaggerElement attached property to any element that you want to stagger in. You will generally place this in the ItemTemplate of the ListView or GridView that you are displaying. You read that right. This transition works in both the ListView and GridView. If you use this on the template of a GridView, then you will see the tiles of your grid stagger in!
First a ListView:
<ListView ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,9.5"
CommonNavigationTransitionInfo.IsStaggerElement="True">
<TextBlock Text="{Binding Title}"
Style="{ThemeResource ListViewItemTextBlockStyle}"/>
<TextBlock Text="{Binding Subtitle}" Style="{ThemeResource BaseTextBlockStyle}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And a GridView:
<GridView ItemsSource="{Binding}">
<GridView.ItemTemplate>
<DataTemplate>
<Rectangle Width="100" Height="100" Fill="{Binding}"
Margin="0,0,9.5,9.5"
CommonNavigationTransitionInfo.IsStaggerElement="True"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Notice that the StackPanel and Rectangle both set CommonNavigationTransitionInfo.IsStaggerElement="True".
That’s all you need to do for your app to begin using this awesome transition!
Download a complete sample (with many more samples!) of these transitions.