在 UI WPF 中对可观察集合移动操作进行动画处理

本文关键字：操作 移动 处理 动画 集合 观察 WPF UI | 更新日期: 2023-09-27 18:36:33

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

有没有办法在代码隐藏中更改集合时对 UI 中项的移动进行动画处理？有点像窗口瓷砖风格的地铁应用程序的流畅运动？

任何关于如何做到这一点的设计想法都将不胜感激。

现在，我能想到的就是为布局跟踪事件制作动画？

谢谢

在 UI WPF 中对可观察集合移动操作进行动画处理

我过去需要这样的东西，并且 - 我记得 - 我最后使用了此处提供的示例的略微修改版本：https://learn.microsoft.com/en-us/archive/blogs/devdave/layout-transitions-an-animatable-wrappanel

此示例比较高级，支持在对集合进行任何修改（添加项、删除项、调整面板大小）时对项进行动画处理

另一方面，如果您只需要项级别的简单动画（例如，当项出现/消失时），则可以使用具有相关事件EventTrigger的控件构建ItemTemplate要简单得多。本示例将在添加项目时对项目进行动画处理：

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");
    }
相关文章：