动画的插入到的ItemsControl [英] Animate Insertions to ItemsControl

查看：186
本文介绍了动画的插入到的ItemsControl的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我时常发现WPF高深莫测。由于下面的XAML将如何之一添加触发器动画（滑下，淡入）新项目加入到时间轴的ObservableCollection。我已经看到了列表框，但没有对项目控制的各种例子。

 ＆LT;网格和GT;
    ＆LT;＆的ScrollViewer GT;
        ＆LT; ItemsControl的名称=TimelineItem
                      的ItemsSource ={结合时间轴}
                      风格={StaticResource的TimelineStyle}
                      ItemContainerStyle ={StaticResource的TweetItemStyle}＆GT;
            ＆LT; ItemsControl.ItemTemplate＆GT;
                ＆LT;＆DataTemplate的GT;
                    ＆LT;电网VerticalAlignment =顶部
                          的Horizo​​ntalAlignment =左＆GT;
                        ＆LT; Grid.ColumnDefinitions＆GT;
                            ＆LT; ColumnDefinition风格={StaticResource的TweetImageColumnStyle}/＆GT;
                            ＆LT; ColumnDefinition /＆GT;
                        ＆LT; /Grid.ColumnDefinitions>
                        ＆LT; Grid.RowDefinitions＆GT;
                            ＆LT; RowDefinition /＆GT;
                            ＆LT; RowDefinition /＆GT;
                            ＆LT; RowDefinition /＆GT;
                            ＆LT; RowDefinition /＆GT;
                        ＆LT; /Grid.RowDefinitions>
                        ＆所述;矩形Grid.Column =0
                                   风格={StaticResource的TweetImageStyle}＆GT;
                            ＆LT; Rectangle.Fill＆GT;
                                ＆LT;的ImageBrush的ImageSource ={结合ProfileImageUrl}/＆GT;
                            ＆LT; /Rectangle.Fill>
                        ＆LT; /矩形＆GT;
                        ＆所述;的StackPanel Grid.Column =1＆GT;
                            ＆LT;网格和GT;
                                ＆LT; Grid.ColumnDefinitions＆GT;
                                    ＆所述; ColumnDefinition宽度=*/＆GT;
                                    ＆LT; ColumnDefinition WIDTH =自动/＆GT;
                                ＆LT; /Grid.ColumnDefinitions>
                                ＆所述; TextBlock的Grid.Column =0
                                           风格={StaticResource的TweetNameStyle}
                                           文本={绑定名称}/＆GT;
                                ＆所述; TextBlock的Grid.Column =1
                                           风格={StaticResource的TweetTimeStyle}
                                           文本={结合TIMEAGO}/＆GT;
                            ＆LT; /网格和GT;
                            ＆所述;对照：TextBlockMarkup Grid.Row =1
                                                      Grid.Column =1
                                                      标记={结合MarkupText}
                                                      风格={StaticResource的TweetStyle}/＆GT;
                        ＆LT; / StackPanel的＆GT;
                        ＆下;分离Grid.Row =2
                                   Grid.ColumnSpan =2
                                   风格={StaticResource的TweetSeparatorTop}/＆GT;
                        ＆下;分离Grid.Row =3
                                   Grid.ColumnSpan =2
                                   风格={StaticResource的TweetSeparatorBottom}/＆GT;
                    ＆LT; /网格和GT;
                ＆LT; / DataTemplate中＆GT;
            ＆LT; /ItemsControl.ItemTemplate>
        ＆LT; / ItemsControl的＆GT;
    ＆LT; /＆的ScrollViewer GT;
＆LT; /网格和GT;


解决方案

这是一段时间，因为我已经动画WPF，但这应该通过设置 DataTrigger 工作在的DataTemplate 的的ItemsControl 的Loaded事件。

一对夫妇的注意事项：


  1. 下面的XAML添加到ItemsControl的的的DataTemplate

  2. 名称＆LT;网格和GT; 中的DataTemplate里：MyGrid

  3. 添加RenderTransformOriginproperty到MyGrid设置Y原点顶部：

    • ＆LT;电网X：NAME =MyGridRenderTransformOrigin =0.5,0＆GT;


  4. 请务必将 Grid.RenderTransform 附加属性包括网格（见下面的示例）

的XAML 

 ＆LT; D​​ataTemplate.Resources＆GT;
    ＆LT;情节提要X：键=ItemAnimation自动翻转=FALSE＆GT;
        ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetName =MyGridStoryboard.TargetProperty =（UIElement.Opacity）＆GT;
            ＆所述; EasingDoubleKeyFrame KeyTime =0值=0/＆GT;
            ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.5值=1/＆GT;
        ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
        ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetName =MyGrid Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)\">
            ＆所述; EasingDoubleKeyFrame KeyTime =0值=0/＆GT;
            ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.5值=1/＆GT;
        ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
    ＆LT; /故事板＆GT;
＆LT; /DataTemplate.Resources>＆LT; D​​ataTemplate.Triggers＆GT;
    ＆LT;的EventTrigger RoutedEvent =FrameworkElement.Loaded＆GT;
        ＆LT; BeginStoryboard故事板={StaticResource的ItemAnimation}/＆GT;
    ＆LT; /＆的EventTrigger GT;
＆LT; /DataTemplate.Triggers>

添加的RenderTransform组到您的网 

 ＆LT;！ - 包含在网格 - ＆GT;
＆LT; Grid.RenderTransform＆GT;
    ＆LT;＆的TransformGroup GT;
        ＆LT; ScaleTransform /＆GT;
    ＆LT; /＆的TransformGroup GT;
＆LT; /Grid.RenderTransform>

这应该让你足够接近，这样你可以自己定制。 FWIW：我用的混合编辑的的ItemTemplate 的时间轴对象的风格打造出来的动画

最后一点：当窗口加载的ItemsControl首次，原集合中的每个项目将发生的动画。当它被添加到集合，并为单个项目发生。此行为是有点靠不住的，所以你可以在$ C $ ItemsControl的窗口或加载后取出触发的显式绑定在XAML并绑定触发C-落后。

修改


  1. 我已经更新的例子，以便它应该与你的XAML现在的工作。

  2. 添加另一个动画滑动（在某种程度上）的新项目。其实，这是从大小为0％增长到100％，从Y轴的顶部开始。

  3. 修订注释＃3，从上面包括 RenderTransformOrigin 属性。

  4. 添加注释＃4包含 Grid.RenderTransform 附加属性。

I'm finding WPF inscrutable at times. Given the following XAML how would one add triggers to animate (slide down, fade in) new items added to the ObservableCollection Timeline. I've seen various examples for list boxes but nothing for items control.

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

解决方案

It's been a while since I've animated WPF, but this should work by setting a DataTrigger in the DataTemplate of the ItemsControl for the Loaded Event.

A couple of notes:

  1. Add the following xaml to the DataTemplate of the ItemsControl
  2. Name the <Grid> inside the DataTemplate: "MyGrid"
  3. Add a RenderTransformOriginproperty to the MyGrid to set the Y origin at the top:
    • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
  4. Be sure to include the Grid.RenderTransform attached property to your grid (see sample below)

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>

Add the RenderTransform groups to your Grid

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

This should get you close enough so that you can customize it yourself. FWIW: I used Blend to build out the animation by editing the style of the ItemTemplate of the Timeline object.

One last note: The animation will occur when the window loads the ItemsControl for the first time, for each item in the original collection. And will occur for an individual item when it is added to the collection. This behavior is a bit wonky, so you could remove the explicit binding of the trigger in the xaml and bind the trigger in the code-behind after the ItemsControl or Window loads.

EDIT

  1. I've updated the example so that it should work with your XAML now.
  2. Added another animation to slide (sort of) the new item. Actually, it's growing from a size of 0% to 100%, starting from the top of the Y axis.
  3. Revised note #3 from above to include a RenderTransformOrigin property.
  4. Added note #4 to include the Grid.RenderTransform attached property.

这篇关于动画的插入到的ItemsControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
跨浏览器开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆