ItemsControl的下拉动画

时间:2014-01-31 15:45:03

标签: c# .net wpf xaml animation

概述

在WPF / XAML中,将项目插入ItemsControl时实现向下滑动动画的最佳方法是什么?

背景

乍一看,似乎我们可以使用Blend表达式交互命名空间中的FluidMoveBehavior。我们只需将其添加到ItemsPanelTemplate的{​​{1}}:

ItemsControl

添加新项目时,可以很好地滑动列表中的其他项目,但不会为新添加的项目设置动画。我们可以在<ItemsPanelTemplate x:Key="EaseIn"> <StackPanel IsItemsHost="True"> <i:Interaction.Behaviors> <ei:FluidMoveBehavior InitialTag="DataContext" Duration="0:0:0.25" AppliesTo="Children"/> </i:Interaction.Behaviors> </StackPanel> </ItemsPanelTemplate> Loaded中添加ItemsControl动画,将项目从屏幕外偏移转换为0:

ItemTemplate

问题在于我的物品高度会有所不同。如果我将Y偏移设置为较大的数字,则其移动的速率与向下移动的其他项目不同,因为它必须在相同的时间内覆盖更大的距离。能够将新项目的动画与<DataTemplate x:Key="DataTemplate1"> <Grid Background="White"> <Grid.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="AnimatedTranslateTransform" Storyboard.TargetProperty="Y" From="-10" To="0" Duration="0:0:0.25"> </DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> </Grid.Triggers> <Grid.RenderTransform> <TransformGroup> <TranslateTransform x:Name="AnimatedTranslateTransform"/> </TransformGroup> </Grid.RenderTransform> <Border BorderBrush="#FF424242" BorderThickness="1"> <StackPanel> <Label Content="{Binding .}"/> </StackPanel> </Border> </Grid> </DataTemplate> 驱动的其他项目结合起来会很不错。

另一种动画方法是将新项目的高度从零动画设置为自动,但这会产生从上到下而不是自下而上显示项目的不良效果。这会给人留下新项目的印象,而不是从顶部向下滑动。

问题

  • 如何使用项目的确切高度对转换进行动画处理?

    我不介意在后面的代码中执行此操作,但因为它位于FluidMoveBehavior内的DataTemplate内部,所以我不知道如何以编程方式检索项目高度。目标是以与其他项目相同的速度移动它。

  • 是否有更简单的方法以跟随其余项目的方式为插入的项目设置动画?

    有一些Silverlight / Blend文章(herehere)建议使用ItemsControl和布局状态。我可以将VisualStatesManager更改为ItemsControl以便能够获取ListBox中的状态,但是我没有在Silverlight中看到WPF中的默认布局状态。

  • 最后,有没有办法将它合并为一个动画?最好只需要为新项目设置动画,让其他项目以相同的速率对动画作出反应。

0 个答案:

没有答案