Animuj insercje do ItemsControl

Question

Czasami znajduję niezbadane WPF. Biorąc pod uwagę następujące XAML, w jaki sposób dodać czynniki uruchamiające do animowania (przesuwania, zmniejszania) nowych elementów dodanych do osi czasu ObservableCollection. Widziałem różne przykłady pól list, ale nic na kontrolę elementów.

<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

Minęło trochę czasu odkąd animowane WPF, ale to powinno działać przez ustawienie DataTrigger w DataTemplate z ItemsControl dla załadowanego Event.

Kilka uwag:

1. Dodaj następujący XAML do DataTemplate z ItemsControl
2. Name the <Grid> wewnątrz DataTemplate: "MyGrid"
3. Dodaj RenderTransformOriginproperty do MyGrid ustawić pochodzenie Y na górze:
   • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
4. Pamiętaj, aby podać Grid.RenderTransform załączony właściwość do swojej sieci do (patrz próbka poniżej)

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> 

Dodaj grupy RenderTransform do siatki

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

Powinno to być wystarczająco blisko, abyś mógł je dostosować samodzielnie. FWIW: Użyłem Blend do zbudowania animacji poprzez edycję stylu obiektu ItemTemplate obiektu Timeline.

Ostatnia uwaga: animacja pojawi się, gdy okno ładuje ItemsControl po raz pierwszy, dla każdej pozycji z oryginalnej kolekcji. I wystąpi dla pojedynczego przedmiotu, gdy zostanie dodany do kolekcji. To zachowanie jest nieco nieporęczne, więc można usunąć jawne powiązanie wyzwalacza w Xaml i powiązać wyzwalacz w kodzie z tyłu po załadowaniu ItemsControl lub okna.

EDIT

1. zaktualizowałem przykład tak, że powinien pracować z XAML teraz.
2. Dodano kolejną animację do przesuwania (sortowania) nowego elementu. W rzeczywistości rośnie od 0% do 100%, zaczynając od górnej części osi Y.
3. Poprawiona uwaga # 3 z powyższej strony zawierająca właściwość RenderTransformOrigin.
4. Dodano notatkę nr 4 zawierającą dołączoną właściwość Grid.RenderTransform.