Item Transition in a Grouped GridView

Question

I have a GridView with groups that contain children and want to add a transition when adding children.

The GridView looks like this at the moment:

My ItemsPanel:

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsWrapGrid GroupPadding="0,0,70,0">
            <ItemsWrapGrid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition />
                </TransitionCollection>
            </ItemsWrapGrid.ChildrenTransitions>
        </ItemsWrapGrid>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

The DataSource has IsSourceGrouped enabled.

But I cannot get the items to transition, they just pop up instantly.

I've tried adding ItemsWrapGrid.Transitions instead, but then only the group headers are animated, not the items themselves. I've also tried adding transitions to the GridView itself, but still no item transition.

How do I enable transitions for children of groups in a GridView?

I'm not sure this is relevant, but I mention it regardless: The Items are loaded from the internet and added into the ItemsSource of the GridView (a ObservableCollection).

Some items are loaded together and added at the same time:

Some items load like this:

1. A group object gets created and added to the ItemsSource
2. one item gets loaded from the internet
3. the item is being added to the group object as child (it pops up instantly in the GridView)
4. repeat from 2 until all items are loaded

Some other items:

1. A group object gets created and added to the ItemsSource
2. multiple items get loaded from the internet
3. the items get added to the group as children all at once (all pop up instantly in the GridView)

I am not using the ViewModel approach like in the Visual Studio grid template, I set the ItemsSource manually.

Answer 1

Check this tutorial in MSDN: Animating list item changes (XAML). You can do it via defining storyboard.