我有一个绑定到可观察集合的包装面板。
有没有办法在代码隐藏中更改集合时对 UI 中项的移动进行动画处理?有点像窗口瓷砖风格的地铁应用程序的流畅运动?
任何关于如何做到这一点的设计想法都将不胜感激。
现在,我能想到的就是为布局跟踪事件制作动画?
谢谢
我过去需要这样的东西,并且 - 我记得 - 我最后使用了此处提供的示例的略微修改版本: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");
}