我有时发现 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>
我已经有一段时间没有为 WPF 制作动画了,但这应该可以通过设置DataTrigger
in the DataTemplate
of the ItemsControl
对于已加载事件。
一些注意事项:
- 将以下 xaml 添加到 ItemsControl 的 DataTemplate 中
- 命名
<Grid>
在数据模板内:“MyGrid”
- Add a RenderTransformOriginproperty to the MyGrid to set the Y origin at the top:
<Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
- 请务必包括
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 组添加到网格中
<!-- Include in the Grid -->
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
</TransformGroup>
</Grid.RenderTransform>
这应该会让您足够接近,以便您可以自己定制它。 FWIW:我使用 Blend 通过编辑动画的样式来构建动画ItemTemplate
of the Timeline
object.
最后一点:当窗口第一次加载原始集合中的每个项目的 ItemsControl 时,将出现动画。当将单个项目添加到集合中时,将会发生该情况。此行为有点奇怪,因此您可以在 xaml 中删除触发器的显式绑定,并在 ItemsControl 或 Window 加载后在代码隐藏中绑定触发器。
EDIT
- 我已经更新了该示例,以便它现在可以与您的 XAML 一起使用。
- 添加了另一个动画来滑动(某种程度上)新项目。实际上,它从 Y 轴顶部开始,从 0% 增长到 100%。
- 修改了上面的注释 #3 以包括
RenderTransformOrigin
财产。
- 添加了注释 #4 以包括
Grid.RenderTransform
附加财产。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)