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="0" Value="30"/>
                        <EasingDoubleKeyFrame KeyTime="0" Value="30"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-5"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" >
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" >
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </ListBox.Resources>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image x:Name="image" Height="150"  Width="300" 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 = 0;
        private  void Button_Click(object sender, RoutedEventArgs e)
        {
    

            DispatcherTimer timer = new DispatcherTimer() { Interval=TimeSpan.FromMilliseconds(100)};
            timer.Start();
            timer.Tick += (o, s) => {
                (o as DispatcherTimer).Interval += TimeSpan.FromMilliseconds(150);
                if(i<10)
                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内进行设置。

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