Question

我在一个堆栈面板中有一个带有两个列表（ItemsControl）的WP7应用程序。我使用三种不同的FluidMoveBehaviors，一种用于stackpanel子节点，一种用于每个ItemsControl子节点。当我单击顶部列表中的项目时，它们将移动到底部列表。由于第一个列表将缩小，第二个列表将动画一点以填补“间隙”。

几乎所有东西都运行正常，这些项目在列表之间平滑动画，上下都有动画，第二个列表在第一个列表增长/缩小时平滑动画。项目动画与列表动画并行运行 - 两者同时开始并具有相同的持续时间。

唯一的问题是，当我将项目从顶部列表移动到底部列表时，它将开始将项目从第一个列表设置为第二个列表中的位置（在第二个列表向上移动之前）。因此，当项目动画完成时，如果第二个列表没有滑动一个项目，它将被放置在那里。因此，项目将在没有动画的情况下跳一步，以获得list2中的正确位置。

一个例子： List1包含项目1,2和3. List2为空。如果我单击第2项，它应该移动到List2并离开List1。

初始布局：
位置1：项目1（List1）
位置2：项目2（List1）
第3项：第3项（清单1）

所需的布局：
位置1：项目1（List1）
位置2：项目3（List1）
第3项：第2项（List2）

但是：当从List1中删除项目2并将其添加到List2时，动画系统会将其设置为位置4的动画，因为这是List2在初始布局中的位置。所以它将被动画到位置4，同时List2将从位置4向上移动到位置3。

实际布局：
位置1：项目1（List1）
位置2：项目3（List1）
位置3： EMPTY
第4位：第2项（List2）

当项目完成动画到位置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>

堆叠列表中的流体移动行为

0 个答案: