wpf 动画插入到 ItemsControl

Animate Insertions to ItemsControl

提问by Mike Ward

I'm finding WPF inscrutable at times. Given the following XAML how would one add triggers to animate (slide down, fade in) new items added to the ObservableCollection Timeline. I've seen various examples for list boxes but nothing for items control.

我有时发现 WPF 高深莫测。鉴于以下 XAML，人们将如何添加触发器以动画（向下滑动、淡入）添加到 ObservableCollection 时间轴的新项目。我见过各种列表框的例子，但没有看到项目控制的例子。

<Grid>
    <ScrollViewer>
        <ItemsControl Name="TimelineItem"
                      ItemsSource="{Binding Timeline}"
                      Style="{StaticResource TimelineStyle}"
                      ItemContainerStyle="{StaticResource TweetItemStyle}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid VerticalAlignment="Top"
                          HorizontalAlignment="Left">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Style="{StaticResource TweetImageColumnStyle}" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Rectangle Grid.Column="0"
                                   Style="{StaticResource TweetImageStyle}">
                            <Rectangle.Fill>
                                <ImageBrush ImageSource="{Binding ProfileImageUrl}" />
                            </Rectangle.Fill>
                        </Rectangle>
                        <StackPanel Grid.Column="1">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0"
                                           Style="{StaticResource TweetNameStyle}"
                                           Text="{Binding Name}" />
                                <TextBlock Grid.Column="1"
                                           Style="{StaticResource TweetTimeStyle}"
                                           Text="{Binding TimeAgo}" />
                            </Grid>
                            <Controls:TextBlockMarkup Grid.Row="1"
                                                      Grid.Column="1"
                                                      Markup="{Binding MarkupText}"
                                                      Style="{StaticResource TweetStyle}" />
                        </StackPanel>
                        <Separator Grid.Row="2"
                                   Grid.ColumnSpan="2"
                                   Style="{StaticResource TweetSeparatorTop}" />
                        <Separator Grid.Row="3"
                                   Grid.ColumnSpan="2"
                                   Style="{StaticResource TweetSeparatorBottom}" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

回答by Metro Smurf

It's been a while since I've animated WPF, but this should work by setting a DataTriggerin the DataTemplateof the ItemsControlfor the Loaded Event.

自从我对 WPF 进行动画处理以来已经有一段时间了，但这应该通过DataTrigger在 的DataTemplate中ItemsControl为加载的事件设置 来工作。

A couple of notes:

一些注意事项：

1. Add the following xaml to the DataTemplate of the ItemsControl
2. Name the <Grid>inside the DataTemplate: "MyGrid"
3. Add a RenderTransformOriginproperty to the MyGrid to set the Y origin at the top:
   • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
4. Be sure to include the Grid.RenderTransformattached property to your grid (see sample below)

1. 将以下xaml添加到ItemsControl的DataTemplate
2. <Grid>将 DataTemplate 内部命名为：“MyGrid”
3. 将 RenderTransformOrigin 属性添加到 MyGrid 以在顶部设置 Y 原点：
   • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
4. 确保将Grid.RenderTransform附加属性包含到您的网格中（请参见下面的示例）

Xaml

xml

<DataTemplate.Resources>
    <Storyboard x:Key="ItemAnimation" AutoReverse="False">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</DataTemplate.Resources>

<DataTemplate.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource ItemAnimation}" />
    </EventTrigger>
</DataTemplate.Triggers>

Add the RenderTransform groups to your Grid

将 RenderTransform 组添加到您的网格

<!-- Include in the Grid -->
<Grid.RenderTransform>
    <TransformGroup>
        <ScaleTransform/>
    </TransformGroup>
</Grid.RenderTransform>

This should get you close enough so that you can customize it yourself. FWIW: I used Blend to build out the animation by editing the style of the ItemTemplateof the Timelineobject.

这应该让您足够接近，以便您可以自己自定义它。FWIW：我使用的混合编辑的风格打造出来的动画ItemTemplate中的Timeline对象。

One last note: The animation will occur when the window loads the ItemsControl for the first time, for each item in the original collection. And will occur for an individual item when it is added to the collection. This behavior is a bit wonky, so you could remove the explicit binding of the trigger in the xaml and bind the trigger in the code-behind after the ItemsControl or Window loads.

最后一个注意事项：当窗口第一次为原始集合中的每个项目加载 ItemsControl 时，动画将发生。并且将在单个项目添加到集合时发生。这种行为有点不稳定，因此您可以删除 xaml 中触发器的显式绑定，并在 ItemsControl 或 Window 加载后在代码隐藏中绑定触发器。

EDIT

编辑

1. I've updated the example so that it should work with your XAML now.
2. Added another animation to slide (sort of) the new item. Actually, it's growing from a size of 0% to 100%, starting from the top of the Y axis.
3. Revised note #3 from above to include a RenderTransformOriginproperty.
4. Added note #4 to include the Grid.RenderTransformattached property.

1. 我已经更新了示例，以便它现在可以与您的 XAML 一起使用。
2. 添加了另一个动画来滑动（有点）新项目。实际上，它从 Y 轴的顶部开始从 0% 的大小增长到 100%。
3. 修改了上面的注释 #3 以包括一个RenderTransformOrigin属性。
4. 添加注释 #4 以包含Grid.RenderTransform附加属性。