Template 动画

如果设置Template的动画，也就意味着对每一个具有此Template的对象进行动画处理。

比如对ListBoxI的ItemTemplate进行设置，添加动画，触发器等，每一个ListBoxItem都具由同等操作。

这里面说的操作均是对Item的整体，而不是内部的席位操作。

比如说是Item的放大，缩小，位移等这样的操作。操作级别也只是最顶层的。

相对应的是ListBoxItem，ListViewItem这样子的级别，如果是涉及到内部建议还是内部处理或者使用字典等方式。

这里介绍ItemContainerStyle

如字面意义是对Item容器进行Style设置。

在MVVM模式的时候，对附加属性可以在这里进行绑定（canvas.top 诸类的）。

那么在进行设置Item整体动画时则

首先需要使用Setter进行设置你要进行改变的属性。

其次是使用动画

XAML

  <ListBox   x:Name="ListBoxFile" Margin="0,0,0,119"   >
            <ListBox.Resources>
                <Storyboard x:Key="S2">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" >
                        <EasingDoubleKeyFrame KeyTime="" Value=""/>
                        <EasingDoubleKeyFrame KeyTime="" Value=""/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-5"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" >
                        <EasingDoubleKeyFrame KeyTime="" Value=""/>
                        <EasingDoubleKeyFrame KeyTime="" Value=""/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" >
                        <EasingDoubleKeyFrame KeyTime="" Value=""/>
                        <EasingDoubleKeyFrame KeyTime="" Value=""/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value=""/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </ListBox.Resources>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image x:Name="image" Height=""  Width="" Source="{Binding Image}" / >
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="RenderTransform" >
                        <Setter.Value>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <EventTrigger  RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard Storyboard="{StaticResource S2}"/>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>

xaml内你随便设置一个Button，并创建事件

我使用的是Timer来控制添加的时间。当然也有别的办法

后台代码：

public partial class MainWindow : Window
    {
        public ObservableCollection<Test> iT = new ObservableCollection<Test>();
        public MainWindow()
        {
            InitializeComponent();

        }

        Task temp;
        int i = ;
        private  void Button_Click(object sender, RoutedEventArgs e)
        {

            DispatcherTimer timer = new DispatcherTimer() { Interval=TimeSpan.FromMilliseconds()};
            timer.Start();
            timer.Tick += (o, s) => {
                (o as DispatcherTimer).Interval += TimeSpan.FromMilliseconds();
                if(i<)
                ListBoxFile.Dispatcher.Invoke(() =>
                {

                    i++;
                    ListBoxFile.Items.Add(new Test() { Image = new BitmapImage(new Uri(@"C:\Users\wppcn\source\repos\WPF QQ MVVM\WinMenu\c.jpg", UriKind.RelativeOrAbsolute)) });
                });
            };

        }
    }

图片

当然以上的的xaml代码也可以在ListBox.DataTemplate内进行设置。

至于为什么写在外面可能是整洁一点，更加符合语义吧