如何为ItemsControl(WPF)中显示的项目的过滤设置动画

时间:2010-02-10 09:13:36

标签: wpf animation datatemplate itemscontrol datatrigger

我目前正在创建一个主要只显示某些项目的ItemsControl的控件。 另外,我有一些控件允许用户过滤ItemsControl中的项目。

我要做的是让用户更好地看到在应用过滤器时删除哪些项目。

所以我所做的不是真正过滤ICollectionView,而是在用于每个项目的VM上引入了一个新属性IsVisible。 然后我向ScaleTransform添加了LayoutTransform作为DataTemplate,我添加了DataTrigger来为变换设置动画:

<Style x:Key="FilterCollapse" TargetType="{x:Type StackPanel}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsVisible}" Value="False">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                         To="0"
                                         Duration="0:0:0.5"/>
                        <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
                                         To="0"
                                         BeginTime="0:0:0.0"
                                         Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
                                         To="1"
                                         Duration="0:0:0.5"/>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                         To="1"
                                         BeginTime="0:0:0.5"
                                         Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

<DataTemplate x:Key="MyTemplate">
    <StackPanel Style="{StaticResource FilterCollapse}">
        <StackPanel.LayoutTransform>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
        </StackPanel.LayoutTransform>

如果用户现在过滤一切正常。 但我遇到的问题是,如果列表中的任何内容发生了变化(添加新项目,......),Storyboard会再次应用,尽管用户确实过滤了任何内容。

原因是,在更改列表后,将重新创建DataTemplate,ScaleY为“1”,然后再次应用DataTrigger,并应用记分板试。

在这种情况下,我希望没有动画发生。

任何想法如何做到这一点? TIA 马丁

1 个答案:

答案 0 :(得分:0)

我找到了一个适合我的解决方案。 我现在正在我的VM中创建ScaleTransform,并将其绑定到LayoutTransform的{​​{1}}。因此,对象始终保持不变,并且在重新创建DataTemplate后不会丢失其值。