WPF ListView анимация по переупорядочению элементов?

Question

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

В демоверсии было приложение WPF с ListView или ListBox с большим количеством элементов. Каждый ListView был переупорядочен, элементы менялись местами в списке. Но ListView был не просто обновлен - на самом деле была анимация перемещения элементов на их новые позиции.

Это приложение было очень классным и сейчас это именно то, что мне нужно. Мы планируем создавать приложения для ранжирования данных в реальном времени, и этот вид анимации был бы идеальным.

Но никто в моей команде не знает, как это можно сделать. Я думаю о ObservableCollection и Databinding, но все остальное для меня загадка.

Любая подсказка или идея была бы отличной помощью. Я уверен, что кто-то уже сделал это. Я видел это своими глазами, когда WPF был новым, но я не знаю, с чего начать.

Answer 1

Существует также возможность создания пользовательской панели. Чарли в значительной степени прав насчет превосходного макета. Чтобы создать пользовательскую панель, вам в первую очередь необходимо переопределить методы MeasureOverride и ArrangeOverride, унаследованные от System.Windows.Controls.Panel.

Этот проект в CodeProject демонстрирует пару пользовательских панелей, в которых вы можете изучить, как они анимируются. FanPanel анимирует перемещение элементов при перемещении одного из конца одного ряда в начало другого или наоборот.

Этот урок также демонстрирует начало анимации в ArrangeOverride.

Я не пробовал, но вы также можете использовать значение ранга вместе с пользовательским ValueConverter для преобразования ранга в позицию, чтобы управлять такой анимацией в Canvas. Однако пользовательская панель была бы лучше автономной, позволяя вам изменить DataTemplate, используемый в ваших ранжированных данных, и позволить каждому из них сообщить Panel, какой высоты они хотят быть (при условии, что они расположены вертикально).

Answer 2

Другой вариант - использовать Microsoft ReorderThemeTransition . Из примера на сайте:

<!--XAML-->
<StackPanel>
<Button x:Name="AddItemButton" Content="AddItem" Click="AddItemButton_Click"/>
<ItemsControl x:Name="ItemsList">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid>
                <WrapGrid.ChildrenTransitions>
<!-- Apply a ReorderThemeTransition that will run when child elements are reordered. -->
                    <TransitionCollection>
                        <ReorderThemeTransition/>
                    </TransitionCollection>
                </WrapGrid.ChildrenTransitions>
            </WrapGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- Initial items. -->
    <Rectangle Width="100" Height="100" Fill="Red"/>
    <Rectangle Width="100" Height="100" Fill="Green"/>
    <Rectangle Width="100" Height="100" Fill="Blue"/>            
</ItemsControl>            
</StackPanel>

А потом в коде:

//    C#
private void AddItemButton_Click(object sender, RoutedEventArgs e)
{
    Rectangle newItem = new Rectangle();
    Random rand = new Random();

    newItem.Height = 100;
    newItem.Width = 100;
    newItem.Fill = new SolidColorBrush(Color.FromArgb(255,
            (byte)rand.Next(0, 255), (byte)rand.Next(0, 255), (byte)rand.Next(0, 255)));

    // Insert a new Rectangle of a random color into the ItemsControl at index 2.
    ItemsList.Items.Insert(2, newItem);
}

Answer 3

Я никогда не пытался сделать что-то подобное, но я подозреваю, что, по крайней мере, вам нужно будет написать свой собственный ViewBase для ListView. Есть прекрасные примеры того, что здесь и здесь . Тогда возникает реальная проблема: какое событие вы используете для своих анимационных триггеров? Попробуйте посмотреть ItemsControl.ItemsChanged.

В конечном счете вам, возможно, придется наследовать от ItemsControl и переопределить несколько методов компоновки и аранжировки, чтобы получить эту функциональность. Даже с ультра-настраиваемыми элементами управления WPF это непростая задача, для которой потребуется больше кода, чем в XAML.