Öğe Eklemelerini ItemsControl'e Uygula

Question

WPF'yi zaman zaman anlaşılmaz buluyorum. Aşağıdaki XAML göz önüne alındığında, ObservableCollection Zaman Çizelgesi'ne eklenen yeni öğelerin canlandırılması (aşağı doğru kaydırılması) için tetikleyiciler nasıl eklenir. Liste kutuları için çeşitli örnekler gördüm ancak öğeler kontrolü için hiçbir şey yok. WPF animasyon beri

<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

Bir süre oldu, ama bu Yüklü Etkinlik için ItemsControl arasında DataTemplate bir DataTrigger ayarlayarak çalışmalıdır.

birkaç not: ayarlamak için MyGrid bir RenderTransformOriginproperty Ekle "MyGrid"

:

1. ItemsControl
2. Adı DataTemplate içindeki <Grid> ait DataTemplate için aşağıdaki xaml ekle üstündeki Y köken:
   • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
3. sizin ızgaraya Grid.RenderTransform ekli özelliği eklemeyi unutmayın sizin Izgara RenderTransform grupları ekleyin

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> 

(aşağıdaki örneğe bakın)

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

Bunu kendiniz özelleştirebilmeniz için yeterince yakınlaştırmanız gerekir. FWIW: Timeline nesnesinin ItemTemplate stilini düzenleyerek animasyonu oluşturmak için Blend'i kullandım.

Son bir not: Pencere, orijinal koleksiyondaki her öğe için ilk defa ItemsControl öğesini yüklediğinde gerçekleşir. Koleksiyona eklendiğinde tek bir öğe için ortaya çıkar. Bu davranış biraz azdır, dolayısıyla tetikleyicinin xaml'deki açık bağlanmasını kaldırabilir ve ItemsControl veya Window yüklendikten sonra kod arkasındaki tetikleyiciyi bağlayabilirsiniz. o şimdi XAML ile çalışması gerektiğini, böylece

DÜZENLEME

1. Ben örnek güncelledik.
2. Yeni öğeyi kaydırmak (sıralamak) için başka bir animasyon eklendi. Aslında Y ekseni üstünden başlayarak% 0'dan% 100'e kadar büyüyor.
3. Düzeltilen not # RenderTransformOrigin özelliği eklemek için yukarıdan.
4. Ekli not # Grid.RenderTransform ekli özelliği eklemek için.
Mükemmel bir yanıt.