WPF ItemsControl에 애니메이션 삽입

Question

이전에 나는 페이드 인에 대해 물어 보았고 항목 컨트롤 삽입 (Animate Insertions to ItemsControl)에 대한 애니메이션을 아래로 스크롤했습니다. 나는 페이드 인 기능을 가지고 있지만 아이템 컨트롤 삽입 애니메이션에 대해서는 아직도 당황 스럽다. 아래는 일종의 "일종의"일입니다.

<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> 

목록은 음수 오프셋으로 오프셋되어 위치에 애니메이션이 적용되므로 "정렬"이라고 말합니다. "애니메이션 위치"는 훌륭하게 보이지만 음수 오프셋으로의 "점프"는 영향을 상실합니다.

CSS에서는 삽입 된 항목의 높이 만 애니메이션으로 만들었지 만 WPF에서이 작업을 수행하는 방법에 대해서는 의문의 여지가 없습니다.

생각하십니까?

Answer 1

그래서, 일반적인 방법을 (I, 롤 멍청한 놈 해요) 나는 모든 세부 사항을 잘 모르겠지만, 내 생각은 다음과 같습니다

1. 낮은하여 시각적 수집
2. 새 개체 삽입에 FluidMove 동작을 추가 너비와 높이, 예. 1 × 1
3. 는