WPF之鼠标滑动切换图片

时间:2022-09-27 20:42:42
原文: WPF之鼠标滑动切换图片

  在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧。

  需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓动效果。

 

  比较简单,但是还是简单说一下开发的思路吧。

  主要是要有一个容器放置很多张图片,然后让它们排列好,增加鼠标事件以达到左右滑动的效果,要关联外部控件控制图片的位置,那么就要有一个依赖属性来控制。

  首先,我们来一个Canvas,然后要让里面的子项排列好,不然它们就堆在一起了。(艾玛,你说为啥不用StackPanel呢?)

WPF之鼠标滑动切换图片WPF之鼠标滑动切换图片
  #region 绘制窗口

        //分配容器的大小
        protected override Size MeasureOverride(Size constraint)
        {

            Size size = new Size(_width, _height);

            foreach (UIElement e in InternalChildren)
            {
                e.Measure(new Size(_width, _height));
            }

            return size;
        }

        //分配子项的大小
        protected override Size ArrangeOverride(Size arrangeSize)
        {
            for (int i = 0; i < InternalChildren.Count; i++)
            {
                InternalChildren[i].Arrange(new Rect(i * _width, 0, _width, _height));
            }
            return arrangeSize;
        }
        #endregion
绘制窗口

  然后为Canvas加上鼠标事件用来滑动,其实这个很简单的,就是鼠标摁下去的点和起来的点的一个距离判断,如果距离够了,就移动一个子项的距离,至于左右就要看你自己怎么设置了,这里也是为什么不用StackPanel的原因了,

  因为这边Canvas我绘制的窗口之中,我会去设置子项的大小,然后根据子项的大小来实现滑动及统一,这样比较方便。

WPF之鼠标滑动切换图片WPF之鼠标滑动切换图片
      void CanvasWithPhoto_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            _endPoint = e.GetPosition(App.Current.MainWindow);

            //X轴滑动的距离
            double offsetX = _startPoint.X - _endPoint.X;
            if (offsetX > 10 && Index < _totalPage)
            {
                ++Index;
            }
            else if (offsetX < -10 && Index > 1)
            {
                --Index;
            }

            Move(Index);
        }

        //X轴的移动动画
        private void Move(int Index)
        {
            DoubleAnimation animation = new DoubleAnimation(-(Index - 1) * _width, TimeSpan.FromMilliseconds(500));
            animation.DecelerationRatio = 0.2;
            animation.AccelerationRatio = 0.2;
            _translate.BeginAnimation(TranslateTransform.XProperty, animation);
        }

        void CanvasWithPhoto_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            _startPoint = e.GetPosition(App.Current.MainWindow);
        }
鼠标事件

  艾玛,这里就有人说了那Index是什么啊,这里就是当前页面了,因为需求里面是想快速定位到图片的,第三张跳到第七张这个样子的,所以用了一个Index,这个就是依赖属性,而且添加了一个自定义的事件,留出一个接口方便以后使用,其实这个程序里面我也没有用上,纯粹就是习惯。

WPF之鼠标滑动切换图片WPF之鼠标滑动切换图片
  //当前页
        public int Index
        {
            get { return (int)GetValue(IndexProperty); }
            set { SetValue(IndexProperty, value); }
        }

        public static readonly DependencyProperty IndexProperty =
            DependencyProperty.Register("Index", typeof(int), typeof(CanvasWithPhoto), new FrameworkPropertyMetadata(1, new PropertyChangedCallback(OniIndexChanged)));
        public static void OniIndexChanged(DependencyObject sender,DependencyPropertyChangedEventArgs e)
        {
            CanvasWithPhoto c = (CanvasWithPhoto)sender;
            int newValue = (int)e.NewValue;
            int oldValue = (int)e.OldValue;
            c.Index = (int)e.NewValue;
            c.OnIndexChanged(oldValue, newValue);
        }
        private void OnIndexChanged(int oldValue, int newValue)
        {
            RoutedPropertyChangedEventArgs<int> args
                = new RoutedPropertyChangedEventArgs<int>(oldValue, newValue);
            args.RoutedEvent = IndexChangedEvent;
            RaiseEvent(args);
            Move(newValue);
        }
        public static RoutedEvent IndexChangedEvent =
            EventManager.RegisterRoutedEvent("IndexChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<int>), typeof(CanvasWithPhoto));
        public event RoutedPropertyChangedEventHandler<int> IndexChanged
        {
            add { AddHandler(IndexChangedEvent, value); }
            remove { RemoveHandler(IndexChangedEvent, value); }
        }
依赖属性

最后,自定义的CanvasWithImage是不会限制长度的,这样就会有一个图片会全部显示出来的问题,这里我是用一个StackPanel包裹住,这个StackPanel是有一个宽度限制的,ClipToBounds="True",设置这个属性,会讲超出部分的内容裁减隐藏。

简陋的效果图:

WPF之鼠标滑动切换图片

软件环境:VisualStudio2010 + Windows 7

http://download.csdn.net/detail/qq278709708/9150335

不足的地方大家多多指教