WPF之鼠標滑動切換圖片

　　在網上找了一會兒也沒找到我想要的效果，還是自己動手，豐衣足食吧。

　　需求：當前面板中只顯示一張圖片，圖片欄的下部有用來顯示當前圖片處於圖片隊列中的位置的圓球，並且點擊下部欄內的圓球可以快速切換，附動畫緩動效果。

 

　　比較簡單，但是還是簡單說一下開發的思路吧。

　　主要是要有一個容器放置很多張圖片，然后讓它們排列好，增加鼠標事件以達到左右滑動的效果，要關聯外部控件控制圖片的位置，那么就要有一個依賴屬性來控制。

　　首先，我們來一個Canvas，然后要讓里面的子項排列好，不然它們就堆在一起了。（艾瑪，你說為啥不用StackPanel呢？）

  #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我繪制的窗口之中，我會去設置子項的大小，然后根據子項的大小來實現滑動及統一，這樣比較方便。

      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，這個就是依賴屬性，而且添加了一個自定義的事件，留出一個接口方便以后使用，其實這個程序里面我也沒有用上，純粹就是習慣。

  //當前頁
        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"，設置這個屬性，會講超出部分的內容裁減隱藏。

簡陋的效果圖：

軟件環境：VisualStudio2010 + Windows 7

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

不足的地方大家多多指教