ItemsControlへの挿入をアニメーション化する

Question

私は時々分けづらいWPFを探しています。次のXAMLが与えられると、ObservableCollectionタイムラインに追加された新しいアイテムをアニメーション化（スライドダウン、フェードイン）するトリガーが追加されます。私はリストボックスのさまざまな例を見てきましたが、項目を制御するものはありません。私は、WPFアニメーションきたので、

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

Answer 1

それはしばらくしているが、これはLoadedイベントのためにItemsControlのDataTemplateでDataTriggerを設定することで動作するはずです。

ノートのカップル：設定するMyGridにRenderTransformOriginpropertyを追加 "MyGrid"

：

1. はItemsControlに
2. 名のDataTemplate内の<Grid>のDataTemplateのに次のXAMLを追加します。上部のY原点：
   • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
3. あなたのグリッドにGrid.RenderTransform添付プロパティを含めるようにしてください（以下のサンプルを参照）

XAML

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

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

あなたのグリッドにRenderTransformグループを追加します。これは、あなた自身でそれをカスタマイズすることができるように、あなたを十分に近づけるはずです。 FWIW：TimelineオブジェクトのItemTemplateのスタイルを編集して、アニメーションを構築するためにBlendを使用しました。

最後に注意してください：アニメーションは、元のコレクション内のアイテムごとにItemsControlが初めて読み込まれるときに発生します。それがコレクションに追加されると、個々のアイテムに対して発生します。この動作はちょっと怪しいので、xamlでトリガの明示的なバインディングを削除し、ItemsControlまたはWindowのロード後にコードビハインドでトリガをバインドすることができます。それが今、あなたのXAMLで動作しますように、私は例を更新しました

EDIT

1. 。
2. 新しいアイテムをスライド（並べ替え）する別のアニメーションを追加しました。実際、Y軸の上から0％から100％のサイズに拡大しています。
3. RenderTransformOriginプロパティを含むように上記の注3を改訂しました。
4. Grid.RenderTransform添付プロパティを含む注4を追加しました。