Question

我有一个与观察能力相关的缠绕通道。

在后面的代码中更改集合时，有没有办法动画UI中项目的移动？有点像窗户瓷砖风格地铁应用程序的流畅运动？

任何有关如何解决此问题的设计理念都将受到赞赏。

现在，我能想到的只是为布局切换事件制作动画？

由于

Answer 1

过去我需要这样的东西 - 我记得 - 我最后使用了这里提供的示例的略微修改版本： https://blogs.msdn.com/b/devdave/archive/2008/07/17/layout-transitions-an-animatable-wrappanel.aspx

此示例稍微高级一些，支持在对集合进行任何修改（添加项目，删除项目，调整面板大小）时动画项目

另一方面，如果您需要的是仅在项目级别的简单动画（例如，当项目出现/消失时），您可以使用具有{{的控件构建ItemTemplate更加简单1}}用于相关事件。此示例将在添加项目时为项目设置动画：

XAML：

EventTrigger

代码背后：

<StackPanel>
    <ItemsControl x:Name="itemsControl" Height="300">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="80" Height="80" Fill="Red" Margin="4" Opacity="0">
                    <Rectangle.RenderTransform>
                        <TranslateTransform Y="20" />
                    </Rectangle.RenderTransform>
                    <Rectangle.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.6" />
                                    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).Y" To="0" Duration="00:00:00.4" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Rectangle.Triggers>
                </Rectangle>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <Button Width="60" Height="40" Content="Add Item" Click="Button_Click" />
</StackPanel>

在UI wpf中设置observablecollection移动操作的动画？

1 个答案: