WPF 让子元素动起来！-阿里云开发者社区

在没有接触Blend之前，自己整出了一个MultiTouchHelper,这东西是做什么的呢？就是利用附加属性让元素可以多点触控。

然后某一天发现Blend里面有一个Behavior的东西，我去，原来有现成的一个叫TranslateZoomRoateBehavior！

第一反应，浪费了本码农两天时间！

第二反应，原来本码农的思想已经达到了这种境界（可以写出和大神类似的东西了），相信要不了多久，本码农就可以升职加薪，当上总经理，出任CEO，迎娶白富美，走上人生巅峰，想想还有点小激动呢，嘿嘿~~

第三反应，TranslateZoomRoateBehavior这玩意儿的名字老长了，而且得添加2个dll,这样的使用方法：

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

<xxxUIElement>
<i:Interaction.Behaviors>
    <ei:TranslateZoomRotateBehavior/>
</i:Interaction.Behaviors>
</xxxUIElement>

再来看本码农的短（chang）小（cu）~精悍的MultiTouchHelper，使用方法：

<Grid mt:MultiTouchHelper.IsContenter="True">
  <xxxUIElement mt:MultiTouchHelper.MaxScale="4"            
                mt:MultiTouchHelper.MinScale="0.5" 
                mt:MultiTouchHelper.ManipulationMode="All"
                mt:MultiTouchHelper.WaitingForRecover="500"     />
</Grid>

mt:MultiTouchHelper.IsContenter：设定触摸的容器

mt:MultiTouchHelper.MaxScale：放大的最大倍数         
mt:MultiTouchHelper.MinScale：缩小的最小倍数
mt:MultiTouchHelper.ManipulationMode：触摸方式
mt:MultiTouchHelper.WaitingForRecover： 恢复初始状态的等待时间

综合使用下来，细节方面TZRB不如MTH,例如MTH支持被触摸的元素置于最顶层，但是效率方面MTH似乎不如TZRB？


MultiTouchHelper会在以后再写一篇文章，下面进入我今天想说的话题（是不是前奏有点长？是不是像某种艺术片让人忍不住跳过~~）



需求：让ListBox中元素依次从左到右移动。


项目进行：

1、创建自定义控件，放个ListBox，遍历ListBox的子元素，为其添加动画，大功告成。
哎呀呀~项目进行的还真是顺利，果然动起来了，任务完成，相信要不了多久我就可以走向人生的巅峰了，想想还真是有点小激动呢~~

客户：你这个框框太难看了，改改。

好吧，改改就改改。找到自定义控件=》ListBox=》ItemTemplate，嚯嚯嚯嚯！改好了，相信要不了多久就可以迎娶白富美，想想还真是有点小激动呢~~

客户：你这东西做的不错，xxx页面也来一个。

好嘞，复制粘贴嘛，哪个不会嘛！哦呵呵，还真是有点小激动呢~~

哎哟，数据实体不一样，子元素的样式不一样哎。再来一个自定义控件？嗯，是个好办法！想想还真是有点小激动呢~~

等等……这样下去也不是办法啊，这也来一个那也来一个，啥时候升职加薪？？？

哎，想想还真是有点小忧桑...

至此，CanvasItemBehavior横空出世，拯救苍生，造福人类……咳咳，请看：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Threading;

namespace Near.Helper.Behaviors
{
    public class CanvasItemBehavior
    {

        #region MoveMode 子级移动方式
        public static MoveOrientaion GetMoveMode(Canvas obj)
        {
            return (MoveOrientaion)obj.GetValue(MoveModeProperty);
        }

        public static void SetMoveMode(Canvas obj, MoveOrientaion value)
        {
            obj.SetValue(MoveModeProperty, value);
        }

        // Using a DependencyProperty as the backing store for MoveMode.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MoveModeProperty =
            DependencyProperty.RegisterAttached("MoveMode", typeof(MoveOrientaion), typeof(CanvasItemBehavior), new PropertyMetadata(MoveOrientaion.None, new PropertyChangedCallback(OnMoveModeChanged)));

        #endregion

        #region 存储动画
        private static Storyboard GetStoryboard(DependencyObject obj)
        {
            return (Storyboard)obj.GetValue(StoryboardProperty);
        }

        private static void SetStoryboard(DependencyObject obj, Storyboard value)
        {
            obj.SetValue(StoryboardProperty, value);
        }

        // Using a DependencyProperty as the backing store for Storyboard.  This enables animation, styling, binding, etc...
        private static readonly DependencyProperty StoryboardProperty =
            DependencyProperty.RegisterAttached("Storyboard", typeof(Storyboard), typeof(CanvasItemBehavior), new PropertyMetadata(null));
        #endregion

        #region Duration 动画持续时间
        public static Duration GetDuration(DependencyObject obj)
        {
            return (Duration)obj.GetValue(DurationProperty);
        }

        public static void SetDuration(DependencyObject obj, Duration value)
        {
            obj.SetValue(DurationProperty, value);
        }

        // Using a DependencyProperty as the backing store for Duration.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DurationProperty =
            DependencyProperty.RegisterAttached("Duration", typeof(Duration), typeof(CanvasItemBehavior), new PropertyMetadata(Duration.Automatic));
        #endregion

        #region 元素出来的时间间隔
        //public static TimeSpan GetInterval(DependencyObject obj)
        //{
        //    return (TimeSpan)obj.GetValue(IntervalProperty);
        //}

        //public static void SetInterval(DependencyObject obj, TimeSpan value)
        //{
        //    obj.SetValue(IntervalProperty, value);
        //}

        //// Using a DependencyProperty as the backing store for Interval.  This enables animation, styling, binding, etc...
        //public static readonly DependencyProperty IntervalProperty =
        //    DependencyProperty.RegisterAttached("Interval", typeof(TimeSpan), typeof(CanvasItemBehavior), new PropertyMetadata(TimeSpan.Zero));

        #endregion

        #region 泡泡模式时指定半径
        public static double GetBubbleR(DependencyObject obj)
        {
            return (double)obj.GetValue(BubbleRProperty);
        }

        public static void SetBubbleR(DependencyObject obj, double value)
        {
            obj.SetValue(BubbleRProperty, value);
        }

        // Using a DependencyProperty as the backing store for BubbleR.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BubbleRProperty =
            DependencyProperty.RegisterAttached("BubbleR", typeof(double), typeof(CanvasItemBehavior), new PropertyMetadata(double.NaN));
        #endregion

        private static void OnMoveModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is Canvas)
            {
                var canvas = d as Canvas;
                if ((MoveOrientaion)e.NewValue != MoveOrientaion.None)
                {
                    canvas.Loaded += canvas_Loaded;
                }
                //else
                //{
                //    canvas.Loaded -= canvas_Loaded;
                //}
            }


        }

        static void canvas_Loaded(object sender, RoutedEventArgs e)
        {
            var canvas = sender as Canvas;
            var mode = GetMoveMode(canvas);

            if (mode > 0)
            {
var itemSource = VisualHelper.FindVisualParent<ListBox>(canvas).ItemsSource;
                
                if (itemSource is System.Collections.Specialized.INotifyCollectionChanged)
                {
                    (itemSource as System.Collections.Specialized.INotifyCollectionChanged).CollectionChanged += (ss, ee) =>
                    {
                        if (ee.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
                        {
                            foreach (var item in ee.NewItems)
                            {
                                var lt = VisualHelper.FindVisualParent<ListBox>(canvas);
                                var itemBox = lt.ItemContainerGenerator.ContainerFromItem(item) as ListBoxItem;
                                itemBox.Visibility = Visibility.Hidden;
                                itemBox.PreviewMouseDown += item_MouseDown;
                                itemBox.IsVisibleChanged += item_IsVisibleChanged;
                            }

                        }
                    };
                }

                foreach (UIElement item in canvas.Children)
                {
                    item.Visibility = Visibility.Hidden;
                    item.PreviewMouseDown += item_MouseDown;
                    item.IsVisibleChanged += item_IsVisibleChanged;
                }


                if (mode == MoveOrientaion.RightToLeft)
                {
                    canvas.FlowDirection = FlowDirection.RightToLeft;
                }

                var timer = new DispatcherTimer();

                int index = 0;

                timer.Interval = TimeSpan.FromMilliseconds(50);

                timer.Tick += (ss, ee) =>
                {
                    if (canvas.Children.Count > 1)
                    {
                        var item = canvas.Children[index++];

                        if (!item.IsVisible)
                        {
                            var t = TimeSpan.Zero;

                            if ((int)mode < 3)
                            {
                                var speed = GetDuration(canvas) != Duration.Automatic ? canvas.ActualWidth / GetDuration(canvas).TimeSpan.Seconds : 100;

                                t = TimeSpan.FromSeconds(canvas.Children[0].RenderSize.Width / speed);
                            }
                            else
                            {
                                var speed = GetDuration(canvas) != Duration.Automatic ? canvas.ActualHeight / GetDuration(canvas).TimeSpan.Seconds : 100;
                                t = TimeSpan.FromSeconds(canvas.Children[0].RenderSize.Height / speed);
                            }

                            if (timer.Interval != t)
                                timer.Interval = t;

                            if ((int)mode < 3)
                            {
                                Canvas.SetTop(item, GetRandom(canvas.ActualHeight - item.RenderSize.Height));
                            }
                            else
                            {
                                Canvas.SetLeft(item, GetRandom(canvas.ActualWidth - item.RenderSize.Width));
                            }

                            item.Visibility = Visibility.Visible;
                        }


                        if (index >= canvas.Children.Count)
                            index = 0;

                        //Console.WriteLine(item);
                    }
                };

                timer.Start();
            }
         

        }
static void item_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            var s = GetStoryboard(sender as UIElement);
            if (s != null)
            {
                if (s.GetIsPaused())
                    s.Resume();
                else
                    s.Pause();
            }
        }

        static void item_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            if ((bool)e.NewValue)
            {
                var item = sender as UIElement;

                if (GetStoryboard(item) == null)
                {
                    var canvas = VisualTreeHelper.GetParent(item) as Canvas;

                    var s = new Storyboard();
                    var ani = new DoubleAnimation();
                    Storyboard.SetTarget(ani, item);

                    var mode = GetMoveMode(canvas);

                    if ((int)mode < 3)
                    {
                        ani.From = 0 - item.RenderSize.Width;
                        ani.To = canvas.ActualWidth;
                        ani.Duration = GetDuration(canvas) > TimeSpan.Zero ? GetDuration(canvas) : TimeSpan.FromSeconds(canvas.ActualWidth / 100);
                        Storyboard.SetTargetProperty(ani, new PropertyPath(Canvas.LeftProperty));
                    }
                    else if (mode == MoveOrientaion.TopToBottom)
                    {
                        ani.From = 0 - item.RenderSize.Height;
                        ani.To = canvas.ActualHeight;
                        ani.Duration = GetDuration(canvas) > TimeSpan.Zero ? GetDuration(canvas) : TimeSpan.FromSeconds(canvas.ActualHeight / 100);
                        Storyboard.SetTargetProperty(ani, new PropertyPath(Canvas.TopProperty));
                    }
                    else if (mode == MoveOrientaion.BottomToTop)
                    {
                        ani.From = canvas.ActualHeight;
                        ani.To = 0 - item.RenderSize.Height;
                        ani.Duration = GetDuration(canvas) > TimeSpan.Zero ? GetDuration(canvas) : TimeSpan.FromSeconds(canvas.ActualHeight / 100);
                        Storyboard.SetTargetProperty(ani, new PropertyPath(Canvas.TopProperty));
                    }

                    s.Children.Add(ani);

                    s.Completed += (ss, ee) =>
                    {
                        item.Visibility = Visibility.Hidden;
                        SetStoryboard(item, null);
                    };

                    SetStoryboard(item, s);

                    s.Begin();
                }
            }
        }

        static int GetRandom(int maxValue)
        {
            Random rd = new Random(Guid.NewGuid().GetHashCode());
            return rd.Next(maxValue);
        }

        static int GetRandom(double maxValue)
        {
            return GetRandom((int)maxValue);
        }

    }

    public enum MoveOrientaion
    {
        None = -1,
        /// <summary>
        /// 从左到右
        /// </summary>
        LeftToRight = 1,
        /// <summary>
        /// 从右到左
        /// </summary>
        RightToLeft = 2,
        /// <summary>
        /// 从上往下
        /// </summary>
        TopToBottom = 3,
        /// <summary>
        /// 从下往上
        /// </summary>
        BottomToTop = 4,
        /// <summary>
        /// 泡泡模式
        /// </summary>
        Bubble = 0
    }
}

用法：

  <ListBox Name="listBox">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas bh:CanvasItemBehavior.MoveMode="LeftToRight" bh:CanvasItemBehavior.Duration="0:0:6" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding}" Width="400" Height="300"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
  </ListBox>

有了CanvasItemBehavior，妈妈再也不用担心我复制粘贴修改啦~~

CanvasItemBehavior目前只实现了水平、垂直方向上的依次移动，至于里面的Bubble(泡泡模式，也就是win系统的泡泡屏保效果)还没有实现，因为一通代码写下来，发现头都大了，什么数学啊物理啊，期待有志之士有趣之人实现这一效果的能够不吝赐教。

终于又写了一篇博客，相信要不了多久我就会被某位猎头看中，然后跳槽加薪，当上总经理，出任CEO，迎娶白富美，走上人生的巅峰，想想还真是有点小激动呢~~

注：有点小激动的想拍砖的童鞋，请轻拍。

WPF 让子元素动起来！

热门文章

最新文章

相关电子书