码迷,mamicode.com
首页 > 其他好文 > 详细

Template 动画

时间:2020-05-06 01:07:45      阅读:46      评论:0      收藏:0      [点我收藏+]

标签:mil   tle   tps   class   load   his   send   setter   创建   

原文: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内进行设置。

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

Template 动画

标签:mil   tle   tps   class   load   his   send   setter   创建   

原文地址:https://www.cnblogs.com/lonelyxmas/p/12833988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!