Поведение перемещения жидкости в сложенных списках

Question

У меня есть приложение WP7 с двумя списками (ItemsControl) в панели стека.Я использую три различных FluidMoveBehaviors, один для дочерних элементов стека и один для каждого дочернего элемента ItemsControl.Когда я нажимаю на элемент в верхнем списке, он перемещается в нижний список.Поскольку первый список будет уменьшен, второй список будет немного оживлен, чтобы заполнить «пробел».

Почти все работает нормально, элементы анимируются плавно между списками, как вверх, так и вниз, а второй список плавно анимируется.когда первый список растет / сжимается.Анимация элемента запускается параллельно с анимацией списка - оба запускаются одновременно и имеют одинаковую продолжительность.

Единственная проблема заключается в том, что при перемещении элемента из верхнего списка в нижний список он запускаетсяанимировать элемент из первого списка в позицию во втором списке (до того, как второй список будет перемещен вверх).Поэтому, когда анимация элемента завершена, она помещается туда, где она была бы, если бы второй список не сдвинулся ни на один элемент.Таким образом, элемент подпрыгнет на один шаг без анимации, чтобы получить правильную позицию в списке 2.

Пример: List1 содержит элементы 1, 2 и 3. List2 пуст.Если я щелкну пункт 2, он должен перейти к списку 2 и покинуть список 1.

Первоначальный макет:
Позиция 1: элемент 1 (Список1)
Позиция 2: элемент 2 (Список1)
Позиция 3: позиция 3 (Список1)

Желаемая раскладка:
Позиция 1: позиция 1 (Список1)
Позиция 2: Элемент 3 (Список1)
Позиция 3: Элемент 2 (Список 2)

Однако: когда Элемент 2 удален из Списка 1 и добавлен в Список 2, система анимации будет анимировать его в положение 4, поскольку именно там находится Список 2находится в первоначальном макете.Таким образом, он будет анимирован в положение 4 и в то же время List2 будет перемещаться вверх из положения 4 в положение 3.

Фактический макет:
Позиция 1: Элемент 1 (List1)
Позиция 2: Элемент 3 (Список 1)
Позиция 3: ПУСТАЯ
Позиция 4: Элемент 2 (Список 2)

Когда элементзаканчивает анимацию в позиции 4, она переходит в позицию 3. Поскольку это правильная позиция.

Как я могу решить эту проблему?У меня есть некоторые идеи, но я не знаю, возможно ли это и как их реализовать: * Удалите элемент из List1 и принудительно запустите анимацию перемещения списка.Когда он начнется, добавьте элемент во второй список, чтобы получить правильную анимацию «цель».Я не знаю, сработает ли тогда анимация предмета.* Задержка анимации перемещения списка на время анимации элемента (не очень элегантно, но было бы достаточно хорошо).* Установите смещение на автоматически рассчитанную целевую позицию элемента.Поскольку я знаю, что автоматическая анимация переместит ее «на один элемент слишком далеко».

Все предложения и идеи приветствуются.

Он настроен так:

<StackPanel>
    <i:Interaction.Behaviors>
        <ei:FluidMoveBehavior AppliesTo="Children">
            ...
        </ei:FluidMoveBehavior>
    </i:Interaction.Behaviors>
    <ItemsControl ItemsSource="{Binding ItemsTop}"> <!-- List1 -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel>
                    <i:Interaction.Behaviors>
                        <ei:FluidMoveBehavior AppliesTo="Children" Tag="DataContext">
                            ...
                        </ei:FluidMoveBehavior>
                    </i:Interaction.Behaviors>
                </StackPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            ...
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <ItemsControl ItemsSource="{Binding ItemsBottom}"> <!-- List2 -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel>
                    <i:Interaction.Behaviors>
                        <ei:FluidMoveBehavior AppliesTo="Children" Tag="DataContext">
                            ...
                        </ei:FluidMoveBehavior>
                    </i:Interaction.Behaviors>
                </StackPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            ...
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>