如何使 EntranceThemeTransition 在自定义面板上工作项目来源? [英] How to make EntranceThemeTransition works on a Custom Panel & ItemsSource?

问题描述

我无法让 EntranceThemeTransition 在自定义面板上作为 ItemsPanelTemplate 工作.见:

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

最简单的代码:

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

最简单的 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>

知道如何制作动画吗?

PS:我在 Loaded 事件上放置了一个 Debug.WriteLine，它被调用了两次，我不知道为什么.这可能会导致问题，因为此动画仅触发一次.可能在添加 ItemsSource 之前触发.

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:仅在使用 ItemsSource 时才会发生.如果我直接在 ListView XAML 上添加元素，它会显示动画.

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

(也在 MSDN)

推荐答案

真是个bug.绑定一起应用或在动画之后应用.因为 EntranceThemeTransition 只发生一次，它认为它已经执行并禁用它.

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>

感谢 Franklin Chen 对 MSDN 论坛关于在代码后面添加项目.

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

这篇关于如何使 EntranceThemeTransition 在自定义面板上工作项目来源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！