Как анимировать фильтрацию элементов, отображаемых в ItemsControl (WPF) - PullRequest
Новая
       39

Как анимировать фильтрацию элементов, отображаемых в ItemsControl (WPF)

0 голосов
/ 10 февраля 2010

В настоящее время я создаю элемент управления, который в основном представляет собой ItemsControl, отображающий некоторые элементы. Кроме того, у меня есть некоторые элементы управления, которые позволяют пользователю фильтровать элементы в этом ItemsControl.

Я пытаюсь сделать так, чтобы пользователю было лучше видно, какие элементы удаляются при применении фильтра.

Итак, вместо того, чтобы действительно фильтровать ICollectionView, я ввел новое свойство 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 будет применен снова, и табло будет применено снова.

В этом случае мне бы хотелось, чтобы анимация не происходила.

Есть идеи, как это сделать? ТИА Martin

1 Ответ

0 голосов
/ 12 февраля 2010

Я нашел решение, которое работает для меня. Сейчас я создаю ScaleTransform в моей виртуальной машине и привязываю его к LayoutTransform из DataTemplate. Из-за этого объект остается неизменным все время и не теряет своего значения после воссоздания DataTemplate.

...