开篇！WPF自定义控件（1）——转盘菜单

注册园子账号有半年了吧，一直想写点什么，但不知道从哪写起。最近一个月在无锡一个公司实习，主要做的就是WPF相关的开发，虽然之前没接触过WPF，但好歹学过C#，上手理解起来还算容易。

最近做了个自定义圆形转盘菜单控件，效果如下：

实现过程：

1. 圆周平分孩子节点（这里孩子节点放的都是图标）
2. 实现点击中间图标，外围图标旋转一周动画
3. 实现鼠标点击拖动跟随旋转动画

关键代码：

　　1.圆周平分孩子节点。先遍历所有孩子节点，再减去中间图标，得到要平分圆周的图标个数，然后得到平分角度，最后根据角度、外圆半径，利用三角函数设置每个图标的TopProperty和LeftProperty属性

//等分圆周 显示中间和周围图标
        private void DivideCircleOnShowMenu()
        {
            //获取孩子节点
            UIElementCollection children = this.Children;
            FrameworkElement f;
            
            //外圆半径
            double outCircleRadius = this.Width/2-IconWidthAndHeight/2;

            //平分度数
            double divideEquallyAngle = 360 / (children.Count - 1);

            for (int i = 0; i < children.Count; i++)
            {
                f = children[i] as FrameworkElement;
                //第一个中间图标
                if (i == 0)
                {
                    if (ShowMenu)
                    {
                        f.SetValue(Canvas.TopProperty, outCircleRadius );
                        f.SetValue(Canvas.LeftProperty, outCircleRadius );
                        if (OperateType == OperateEnum.MouseOperate)
                        {
                            f.MouseDown += F_MouseDown;
                        }
                        else
                        {
                            f.TouchUp += F_TouchUp;
                        }
                    }

                    else
                    {
                        f.SetValue(Canvas.TopProperty, outCircleRadius - f.Width / 2);
                        f.SetValue(Canvas.LeftProperty, outCircleRadius - f.Width / 2);
                        f.Visibility = Visibility.Hidden;
                    }
                }

                else
                {
                    //内角度数  角度转换为弧度
                    double innerAngle = divideEquallyAngle * (i-1) * Math.PI / 180;

                    //TOP距离
                    double topHeight = outCircleRadius - Math.Cos(innerAngle) * outCircleRadius;

                    //Left距离
                    double leftWidth = Math.Sin(innerAngle) * outCircleRadius;

                    if (innerAngle <= 180)
                    {
                        f.SetValue(Canvas.TopProperty, topHeight );
                        f.SetValue(Canvas.LeftProperty, outCircleRadius + leftWidth );
                    }
                    if (innerAngle > 180)
                    {
                        f.SetValue(Canvas.TopProperty, topHeight);
                        f.SetValue(Canvas.LeftProperty, outCircleRadius - leftWidth );
                    }
                }
            }
        }

 　　2.点击中间图标，外围图标旋转一周动画。这里用到的是RotateTransform动画，动画很简单，就是绕点旋转。但是还得设置每个图标的RenderTransformOrigin，这个属性是一个相对Point，以每个图标的左上角为坐标原点，向下和向右为正，比如设为（0.5，0.5）表示每个图标绕本身的中心点旋转，（1,1）表示绕本身的右下角旋转。这里我是选择让整个canvas绕着自身中心点旋转，然后再让每个图标绕自身反转，就可以实现图标方向相对不变。最后我这里rotateNumber（旋转度数）是自定义的依赖属性，可以在前台XAML应用这个控件时自行设置的。

 //canvans旋转
        private void RotateAnimation(UIElement uIelement, double rotateNumber)
        {
            RotateTransform rtf = new RotateTransform();
            uIelement.RenderTransform = rtf;
            uIelement.RenderTransformOrigin = new Point(0.5, 0.5);

            //定义动画路径和事件
            DoubleAnimation dbAnimation = new DoubleAnimation(0, rotateNumber,
                new Duration(TimeSpan.FromSeconds(RotateSpeed)));

            //开始动画
            rtf.BeginAnimation(RotateTransform.AngleProperty, dbAnimation);

　　3.实现鼠标拖动跟随旋转动画。这里主要就是MouseDown,MouseMove和MouseUp事件。主要是MouseMove中要获取到每次移动旋转的度数，以及转动方向的判断（顺时针转还是逆时针转）。求每次拖动旋转的度数我用到了高中的数学知识，两向量夹角的余弦公式（没错，就是它了，这也是我目前能想到的办法了= =）。根据这个公式算出旋转度数后，就要开始根据每次点击点和结束点的象限来判断旋转方向。

　　

//拖动图标旋转事件
        private void Rotate_MouseMove(object sender, MouseEventArgs e)
        {
            Point mAfter = e.GetPosition(this); //获取鼠标移动过程中的坐标

            Point n1 = new Point(centerP.X - mBefore.X, centerP.Y - mBefore.Y);
            Point n2 = new Point(centerP.X - mAfter.X, centerP.Y - mAfter.Y);

            //n1*n2
            double n1n2 = n1.X * n2.X + n1.Y * n2.Y;
            //n1的模
            double n1mo = Math.Sqrt(Math.Pow(n1.X, 2) + Math.Pow(n1.Y, 2));
            //n2的模
            double n2mo = Math.Sqrt(Math.Pow(n2.X, 2) + Math.Pow(n2.Y, 2));


            //得带旋转角度
            double rotateNum = Math.Acos(n1n2 / (n1mo * n2mo));

            //相对坐标原点位置
            Point potM = new Point();
            potM.X = mAfter.X - centerP.X;
            potM.Y = centerP.Y - mAfter.Y;
            Point potD = new Point();
            potD.X = mBefore.X - centerP.X;
            potD.Y = centerP.Y - mBefore.Y;


            //当鼠标移动超出边界时停止旋转
            if (mAfter.X < 0 || mAfter.X > this.Width || mAfter.Y < 0 || mAfter.Y > this.Height)
            {
                this.MouseMove -= Rotate_MouseMove;

            }

            else
            {
                if (GetcLockwise(potD, potM))
                {
                    rotateAng += rotateNum;
                }
                else
                {
                    rotateAng -= rotateNum;
                }
            }

            //执行旋转动画

            IconRotateAnimation(-rotateAng);
            CanvansRotateAnimation(rotateAng);

        }

        /// <summary>
        /// 获取顺时针还是逆时针
        /// </summary>
        /// <param name="potD">按下坐标</param>
        /// <param name="potM">移动坐标</param>
        /// <returns>True：顺，False：逆</returns>
        private bool GetcLockwise(Point potD, Point potM)
        {
            if (potM.Y >= 0 && potD.Y >= 0) //一二象限
            {
                return potM.X >= potD.X;
            }
            if (potM.Y < 0 && potD.Y < 0)   //三四象限
            {
                return potM.X <= potD.X;
            }
            if (potM.X >= 0 && potD.X >= 0) //一四象限
            {
                return potM.Y <= potD.Y;
            }
            if (potM.X < 0 && potD.X < 0)   //二三象限
            {
                return potM.Y >= potD.Y;
            }
            else
            {
                return true;
            }
        }    

　　最后，又增加了触摸滑动功能，其实大体上是就是把对应的Mouse事件换成Touch事件就OK了，但效果实现上可能需要略微的改动。本来还要做成旋转带惯性的效果的，只可惜太菜，网上资源也比较少，只能无告而终。现在觉得做WPF的控件开发也蛮有意思的，蛮锻炼人的逻辑思维能力的。开篇文到此为止了，再接再励吧！

附上Demo源码：旋转菜单控件