10

我发现 WPF 有时难以理解。鉴于以下 XAML，如何添加触发器以动画（向下滑动、淡入）添加到 ObservableCollection 时间轴的新项目。我已经看到了列表框的各种示例，但没有看到项目控制的示例。

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

1 回答 1

23

自从我为 WPF 制作动画以来已经有一段时间了，但这应该通过在 Loaded EventDataTrigger的DataTemplateof 中设置 a 来工作。ItemsControl

几点注意事项：

  1. 将以下 xaml 添加到 ItemsControl 的 DataTemplate
  2. 将<Grid>里面的 DataTemplate 命名为：“MyGrid”
  3. 将 RenderTransformOrigin 属性添加到 MyGrid 以将 Y 原点设置在顶部：
    • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
  4. 确保将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>

将 RenderTransform 组添加到您的 Grid

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

这应该让您足够接近，以便您可以自己自定义它。ItemTemplateFWIW：我使用 Blend 通过编辑对象的样式来构建动画Timeline。

最后一点：动画将在窗口第一次加载 ItemsControl 时发生，对于原始集合中的每个项目。并且将在将单个项目添加到集合时发生。这种行为有点奇怪，因此您可以删除 xaml 中触发器的显式绑定，并在 ItemsControl 或 Window 加载后在代码隐藏中绑定触发器。

编辑

  1. 我已经更新了示例，以便它现在可以与您的 XAML 一起使用。
  2. 添加了另一个动画来滑动（某种程度）新项目。实际上，它的大小从 Y 轴的顶部开始从 0% 增长到 100%。
  3. 修改了上面的注释 #3 以包含一个RenderTransformOrigin属性。
  4. 添加了注释 #4 以包含Grid.RenderTransform附加属性。
于 2012-09-29T23:40:59.177 回答