如何实现已添加/已删除列表项的淡入淡出

问题描述

假设我有一个 ListBox 绑定到 ObservableCollection 并且我想动画添加/删除 ListBoxItems 例如.淡入/淡出、向下/向上等.我该怎么做?

Suppose I have a ListBox bound to an ObservableCollection and I want to animate adding/removing of ListBoxItems eg. FadeIn/Out, SlideDown/Up etc. How can I do that?

推荐答案

TJ 博士的回答足够正确.沿着这条路线走下去，您必须包装 ObservableCollection 并实现 BeforeDelete 事件，然后您可以使用 EventTrigger 来控制故事板.

Dr TJ's answer is right enough. Going down that route you'd have to wrap ObservableCollection<T> and implement a BeforeDelete event,..then you could use an EventTrigger to control the storyboards.

不过那是一种正确的痛苦.您可能最好创建一个 DataTemplate 并在 EventTrigger 中处理 FrameworkElement.Loaded 和 FrameworkElement.Unloaded 事件.

That's a right pain though. You're probably better creating a DataTemplate and handling the FrameworkElement.Loaded and FrameworkElement.Unloaded events in an EventTrigger.

我在下面为您提供了一个快速样本.您必须自己整理删除代码，但我相信您能胜任.

I've put a quick sample together for you below. You'd have to sort out the remove code yourself but I'm sure you're up to it.

    <ListBox>
        <ListBox.ItemsSource>
            <x:Array Type="sys:String">
                <sys:String>One</sys:String>
                <sys:String>Two</sys:String>
                <sys:String>Three</sys:String>
                <sys:String>Four</sys:String>
                <sys:String>Five</sys:String>
            </x:Array>
        </ListBox.ItemsSource>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"
                           Opacity="0">
                    <TextBlock.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                     Duration="00:00:02"
                                                     From="0"
                                                     To="1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="FrameworkElement.Unloaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                     Duration="00:00:02"
                                                     From="1"
                                                     To="0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </TextBlock.Triggers>
                </TextBlock>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

HTH，Stimul8d

HTH, Stimul8d

这篇关于如何实现已添加/已删除列表项的淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！