HowTo animate filtering of items displayed in an ItemsControl (WPF)

Question

Hi,

I'm currently creating a control that is mainly just an ItemsControl displaying some items. In addition I have some controls which allows the user to filter the items in that ItemsControl.

What I'm trying to do is to make it better visible to the user which items are removed when the filter is applied.

So what I did was instead of really filtering the ICollectionView, I introduced a new property IsVisible on the VM used for each item. Then I added a ScaleTransform as LayoutTransform to the DataTemplate, and I added a DataTrigger to animate the transform.

<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>

if the User now filters everything works fine. But the problem I have is if the anything changed in the list (adding new items, ...) the storyboard is applied again, although the user did filter anything.

The reason for it is, that after the list has been changed, the DataTemplate will be recreated, with a ScaleY of "1", then the DataTrigger is applied again, and the scoreboard applied again.

In this case I would like that no animation happens.

Any ideas how to do this? tia Martin

Answer 1

I found a solution that works for me. I'm now creating the ScaleTransform in my VM, and bind it to the LayoutTransform from the DataTemplate. Because of this the object stays the same all the time, and doesn't loose it's value once the DataTemplate is recreated.