时间戳

首页 > 解决方案 > 动画列表框中新添加的项目

wpf - 动画列表框中新添加的项目

问题描述

我正在尝试将动画添加到列表框中新添加的项目和/或更改的项目，这是我到目前为止所做的：

<Style x:Key="ListBoxItemStyle4" TargetType="{x:Type ListBoxItem}">
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <ScaleTransform x:Name="transform" />
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2" />
                            <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" From="0" Duration="0:0:.2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>

这会为我的列表框中的每个项目设置动画。

标签： wpf

解决方案

本文中解释了一个工作示例：

https://social.technet.microsoft.com/wiki/contents/articles/31416.wpf-mvvm-friendly-user-notification.aspx#Toast

它通过 itemcontainerstyle 应用动画：

    <ListBox ItemsSource="{Binding Messages}" BorderBrush="Transparent" Background="LightGray">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <ScaleTransform/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1.2" FillBehavior="Stop" />
                                    <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" From="0" Duration="0:0:1.2" FillBehavior="Stop">
                                        <DoubleAnimation.EasingFunction>
                                            <BounceEase Bounces="2" Bounciness="6"/>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>

还解决了删除前的动画。

推荐阅读