我怎样才能实现进出添加/删除ListItems的衰落 [英] How can I implement fading in and out of Added/Removed ListItems

问题描述

假设我有一个的ListBox 绑定到一个的ObservableCollection ，我想动画添加/删除<$ C的$ C> ListBoxItems 如。淡入/淡出，了slideDown /向上等。我怎么能这样做？

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＆LT; T＆GT; 和实施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 和处理 FrameworkElement.Loaded 和 FrameworkElement.Unloaded 在的EventTrigger 事件。

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.

我下面放了快速出样一起给你。你必须理清删除code自己，但我敢肯定，你起来吧。

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

这篇关于我怎样才能实现进出添加/删除ListItems的衰落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！