Fluid move behavior in stacked lists

I have a WP7 app with two lists (ItemsControl) in a stackpanel. I use three different FluidMoveBehaviors, one for the stackpanel children and one for each ItemsControl children. When I click item in the top list they are moved to the bottom list. Since the first list will shrink the second list will animate up a bit to fill the "gap".

Almost everything works fine, the items animate smoothly between the lists, both up and down and the second list animates smoothly when the first list grows/shrinks. The item animation is run parallel with the list animation - both starts at the same time and have the same duration.

The only problem is that when I move an item from the top list to the bottom list it will start to animate the item from the first list to the position in the second list (before the second list is moved up). So when the item animation is finished it's placed where it would be if the second list hadn't slided up one item. So the item will jump up one step without animation to get the correct position in list2.

An examp开发者_如何学编程le: List1 contains item 1, 2 and 3. List2 is empty. If I click item 2 it should move to List2 and leave List1.

Initial layout:

Position 1: Item 1 (List1)

Position 2: Item 2 (List1)

Position 3: Item 3 (List1)

Desired layout:

Position 1: Item 1 (List1)

Position 2: Item 3 (List1)

Position 3: Item 2 (List2)

However: When Item 2 is removed from List1 and added to List2 the animation system will animate it to position 4, since that is where List2 is in the initial layout. So it will be animated to position 4 and at the same time List2 will move up from position 4 to position 3.

Actual layout:

Position 1: Item 1 (List1)

Position 2: Item 3 (List1)

Position 3: EMPTY

Position 4: Item 2 (List2)

When the item finishes its animation to position 4 it will jump to position 3 since it's the correct position.

How can I solve this problem? I have some ideas but I don't know if it's possible nor how to implement them: * Remove the item from List1 and force the list moving animation to start. When it has started add the item to the second list, thus get the correct animation "target". I don't know if the item animation would work then though. * Delay the list moving animation by the duration of the item animation (not very elegant but would be good enough). * Set an offset to the automatically calculated target position of the item. Since I know the automatic animation will move it "one item too far".

All suggestions and ideas are appreciated.

It's set up like this:

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