在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文章(here和here)建议使用ItemsControl
和布局状态。我可以将VisualStatesManager
更改为ItemsControl
以便能够获取ListBox
中的状态,但是我没有在Silverlight中看到WPF中的默认布局状态。