How to make EntranceThemeTransition works on a Custom Panel & ItemsSource?

Question

I can't get EntranceThemeTransition to work on a custom panel as ItemsPanelTemplate. See:

Simplest code behind:

public List<int> MyListExample = new List<int>() {0, 1, 2, 3, 4, 5};

Simplest XAML:

<ListView Width="120" ItemsSource="{x:Bind MyListExample}">
    <ListView.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromVerticalOffset="200" IsStaggeringEnabled="True"/>
        </TransitionCollection>
    </ListView.ItemContainerTransitions>

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <!--EntranceThemeTransition WORKS-->
            <ItemsWrapGrid/>

            <!--EntranceThemeTransition does NOT work-->
            <!--<StackPanel/>-->

            <!--EntranceThemeTransition does NOT work. goal: make this work-->
            <!--<local:FluidPanel/>-->
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Any idea how to make the animation works?

PS: I put a Debug.WriteLine on the Loaded event, it's being called twice and I have no idea why. This might be causing the problem, because this animation is only triggered once. Possibly is being triggered before the ItemsSource being added.

PS2: It only happens when using ItemsSource. If I add the elements directly on the ListView XAML it shows the animation.

(also on MSDN)

Answer 1

It is really a bug. The binding gets applied together or just after the animation. Because EntranceThemeTransition just happens once, it thinks that it already executed and disables it.

This is the workaround I'm currently using:

C#:

public ObservableCollection<int> items { get; set; } = new ObservableCollection<int>() { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };

private async void MyListView_Loaded(object sender, RoutedEventArgs e)
{
    foreach (var item in items)
        MyListView.Items.Add(item);

    await Task.Delay(1000); //wait for animation
    MyListView.SetBinding(ItemsControl.ItemsSourceProperty, new Binding() { Source = this, Path = new PropertyPath("items"), Mode = BindingMode.TwoWay });
}

XAML:

<ListView x:Name="MyListView" Loaded="MyListView_Loaded">
    <ListView.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromHorizontalOffset="0" FromVerticalOffset="2000" IsStaggeringEnabled="True"/>
        </TransitionCollection>
    </ListView.ItemContainerTransitions>

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Thanks Franklin Chen for the insight on MSDN forum about adding the items on code behind.