c# - 在 UI wpf 中为 observablecollection 移动操作设置动画？

Question

我有一个绑定到可观察集合的包装面板。

当集合在后面的代码中更改时，有没有办法在 UI 中为项目的移动设置动画？有点像 windows tile 风格的 Metro 应用程序的流畅运动？

任何有关如何解决此问题的设计想法都将不胜感激。

现在，我能想到的只是为布局更改事件设置动画？

谢谢

Answer 1

我过去需要这样的东西 - 我记得 - 我最终使用了此处提供的示例的略微修改版本： https ://docs.microsoft.com/en-us/archive/blogs/devdave/layout-过渡动画包装面板

此示例有点高级，支持在对集合进行任何修改时为项目设置动画（添加项目、删除项目、调整面板大小）

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

XAML：

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

后面的代码：

    ObservableCollection<string> items = new ObservableCollection<string>();

    public MainWindow()
    {
        InitializeComponent();
        itemsControl.ItemsSource = items;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        items.Add("New Item");
    }