WPF 动画插入到 ItemsControl [英] WPF Animate Insertion into an ItemsControl
问题描述
之前我询问了项目控件插入的淡入、向下滚动动画(动画插入到 ItemsControl).我让淡入工作,但我仍然对项目控件插入动画感到困惑.下面是一些有点"有效的东西.
Earlier I asked about a fade-in,scroll down animation for items control insertion ( Animate Insertions to ItemsControl ). I got the fade-in working but I'm still perplexed about the items control insertion animation. Below is somethings that "sort of" works.
<Grid>
<ScrollViewer>
<ItemsControl Name="TimelineItems"
ItemsSource="{Binding Timeline}"
Style="{StaticResource TimelineStyle}"
ItemContainerStyle="{StaticResource TweetItemStyle}">
<ItemsControl.RenderTransform>
<TransformGroup>
<TranslateTransform />
</TransformGroup>
</ItemsControl.RenderTransform>
<ItemsControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.SizeChanged">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TimelineItems"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0"
Value="-50" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ItemsControl.Triggers>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Name="MyGrid"
Background="{Binding TweetType, Converter={StaticResource tweetTypeConverter}}"
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.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.8"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource ItemAnimation}" />
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
我说有点"是因为列表被负偏移量偏移,然后动画到位.位置动画"看起来不错,但是跳转"到负偏移会破坏效果.
I say "sort of" because the list is offset by a negative offset and then animated into position. The "animation to position" looks great, but the "jump" to a negative offset spoils the affect.
在 CSS 中,我会简单地为插入项的高度设置动画,但我并不想知道如何在 WPF 中做到这一点.
In CSS, I would simply animate the height of the inserted item but I haven't puzzled out how to do this in WPF.
想法?
推荐答案
所以,我不知道所有细节,但我认为通常的方法(我是菜鸟,哈哈)是:
So, I don't know all details, but I think usual way (I'm noob, lol) are:
- 将 FluidMove 行为添加到您的视觉集合中
- 插入具有较低宽度和高度的新对象,例如1x1
- 通过情节提要或手动 DoubleAnimation 将其动画化为实际大小
这篇关于WPF 动画插入到 ItemsControl的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!