WPF 让子元素动起来!

  1. 云栖社区>
  2. 博客>
  3. 正文

WPF 让子元素动起来!

杰克.陈 2018-10-22 10:10:00 浏览370
展开阅读全文
原文: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,迎娶白富美,走上人生的巅峰,想想还真是有点小激动呢~~

 

 

注:有点小激动的想拍砖的童鞋,请轻拍。

网友评论

登录后评论
0/500
评论
杰克.陈
+ 关注