WPF 动画插入到 ItemsControl [英] WPF Animate Insertion into an ItemsControl

问题描述

之前我询问了项目控件插入的淡入、向下滚动动画(动画插入到 ItemsControl).我让淡入工作，但我仍然对项目控件插入动画感到困惑.下面是一些有点"有效的东西.

Earlier I asked about a fade-in,scroll down animation for items control insertion ( Animate Insertions to ItemsControl ). I got the fade-in working but I'm still perplexed about the items control insertion animation. Below is somethings that "sort of" works.

<Grid>
    <ScrollViewer>
        <ItemsControl Name="TimelineItems"
                      ItemsSource="{Binding Timeline}"
                      Style="{StaticResource TimelineStyle}"
                      ItemContainerStyle="{StaticResource TweetItemStyle}">
            <ItemsControl.RenderTransform>
                <TransformGroup>
                    <TranslateTransform />
                </TransformGroup>
            </ItemsControl.RenderTransform>
            <ItemsControl.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.SizeChanged">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TimelineItems"
                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
                                <EasingDoubleKeyFrame KeyTime="0"
                                                      Value="-50" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                      Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ItemsControl.Triggers>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Name="MyGrid"
                          Background="{Binding TweetType, Converter={StaticResource tweetTypeConverter}}"
                          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.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.8"
                                                      Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </DataTemplate.Resources>

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

我说有点"是因为列表被负偏移量偏移，然后动画到位.位置动画"看起来不错，但是跳转"到负偏移会破坏效果.

I say "sort of" because the list is offset by a negative offset and then animated into position. The "animation to position" looks great, but the "jump" to a negative offset spoils the affect.

在 CSS 中，我会简单地为插入项的高度设置动画，但我并不想知道如何在 WPF 中做到这一点.

In CSS, I would simply animate the height of the inserted item but I haven't puzzled out how to do this in WPF.

想法?

推荐答案

所以，我不知道所有细节，但我认为通常的方法(我是菜鸟，哈哈)是:

So, I don't know all details, but I think usual way (I'm noob, lol) are:

1. 将 FluidMove 行为添加到您的视觉集合中
2. 插入具有较低宽度和高度的新对象，例如1x1
3. 通过情节提要或手动 DoubleAnimation 将其动画化为实际大小

这篇关于WPF 动画插入到 ItemsControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！