使用silverlight构建一个工作流设计器(四)(附最新源代码及在线演示)

 

最新源代码下载：http://www.shareidea.net/opensource.htm

最新版本在线演示：http://www.shareidea.net/workflow.htm

技术支持QQ群：85444465

本文系列索引：

使用silverlight构建一个工作流设计器(一)

使用silverlight构建一个工作流设计器(二)

使用silverlight构建一个工作流设计器(三)

使用silverlight构建一个工作流设计器(四)

使用silverlight构建一个工作流设计器(五)

 使用silverlight构建一个工作流设计器(六)

使用silverlight构建一个工作流设计器(七)  

使用silverlight构建一个工作流设计器(八)

使用silverlight构建一个工作流设计器(九)

使用silverlight构建一个工作流设计器(十)  

使用silverlight构建一个工作流设计器(十一)  

按计划程序到这里就差不多结束了，但是有很多朋友希望能继续完善这个程序，并增加有关工作流属性的内容，应各位朋友要求，把这个系列继续下去，并增加流程属性的一些内容。工作流在现代企业中广泛应用，本文不强求完成一个大而全的流程应用，而是做一个框架类的东西，方便进行二次开发和扩展。 

大家从前面的内容可以看出，本文很少直接贴代码上来，而是主要侧重于创作一个应用程序过程中的遇到的问题以及解决问题的思路和方法（当然也包括使用silverlight遇到的问题）。并且说明解决一个问题的多个方法之间的取舍原因。当然这个原因不是绝对的，根据时间的推移和思路的延伸，我们还可以找到更加合适的解决问题的方法。

在这个学习silverlight的过程中，希望和大家分享一下学习的心得，关于silverlight的，关于系统设计都有，只要使我觉得比较新鲜有趣的。也希望各位大虾，新手多多指点。

五 美化

 

需要美化的内容有很多，目前想到并且打算做的部分有以下几方面的内容： 

l         规则使用带箭头的直线

l         活动根据不同的活动类型显示不同的形状。

l         界面调整

5.1 规则使用带箭头的直线

在silverlight中的 Line类没有找设置箭头的属性，所以我们要自己做一个箭头放在规则的尾部，能想到的有两种方法：

l         使用一个箭头的图片放在规则的尾部。

l         自己编写一个表示箭头的类，并将这个类放在规则的尾部。

对于这两种方法，都涉及到一个问题，就是根据规则在不同的位置，箭头的方向要随着规则的变化角度做一个改变，以适应规则的角度。 

第一种方法比较简单，但是使用图片一个是增加客户端下载内容的大小，还有不方便改变显示的颜色，每次改变颜色都要换新的图片，不方便。那么我们就自己写一个表示图片的类，方式在规则的尾部。

这个类继承自System.Windows.Controls.Canvas，我们叫它 Arrowhead ，Arrowhead类包含两个子控件，分别是两个 Line（直线）类，这两个直线类按照不同的角度排列，就可以形成一个箭头，类似下面的图形：

 

把这个类放在规则类的尾部，就形成了一个带箭头的直线，如下所示：

 

这样用几个对象合成了一个带箭头的直线 。

接下来的问题就是当直线被拖转进行位移和旋转的时候，箭头也要随着进行相同的位移和旋转。虽然我们不知道如何具体的实现，但是经过分析得知，这个旋转的角度和直线的起始点坐标位置和终点坐标位置有关，那么我们给箭头类增加一个方法来设置这个变化，这个方法有两个参数分别表示直线的起始和终结位置坐标，这样一个带箭头的直线就完成了。这样的过程可用下图来表示：

 

接下来我们在规则类的xaml文件中这册这个类，类似下面的代码：

<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.Rule"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     MouseEnter="UserControl_MouseEnter"   
     MouseLeave="UserControl_MouseLeave"  
     xmlns:Shareidea="clr-namespace:Shareidea.Web.UI.Control.Workflow.Designer"
>

 

其中最后一行

xmlns:Shareidea="clr-namespace:Shareidea.Web.UI.Control.Workflow.Designer"

我们在当前xaml中注册了命名空间

Shareidea.Web.UI.Control.Workflow.Designer

那么在当前xaml文件中既可以使用类似于

<Shareidea:Arrowhead  Name="endArrow" />

这样的声明来使用自定义类了。

下面的代面具体表示了这样的一个箭头类，其中用到了数学公式的类，System.Math.Sin(double d),这样的一个类用来计算一个角度的Sin值，需要注意的是，我们平常讲的30度的Sin不能直接作为参数传递，因为这个函数的参数是一个弧度值，而不是一个角度的值，需要做一个转换，例如 Math.PI * 30/ 180.0 ，经过这样一个转换，把角度30转换成一个弧度值就可以了。

 

public class Arrowhead : System.Windows.Controls.Canvas
    {
       
        int arrowLenght = 12;
        int arrowAngle = 30;

        /// <summary>
        /// 箭头的长度
        /// </summary>
        public int ArrowLenght
        {
            get
            {
                return arrowLenght;
            }
            set
            {
                arrowLenght = value;
            }
        }
        /// <summary>
        /// 箭头的与直线的夹角
        /// </summary>
        public int ArrowAngle
        {
            get
            {
                return arrowAngle;
            }
            set
            {
                arrowAngle = value;
            }
        } 
        Line lineLeft;
        Line lineRight;  
        public int ZIndex
        {
            get
            {
                return (int)this.GetValue(Canvas.ZIndexProperty);
            }
            set
            {
                this.SetValue(Canvas.ZIndexProperty, value);
            }
        }

        public void SetAngel(Point beginPoint, Point endPoint)
        {
        }
        public Brush Stroke
        {
            get
            {
                return lineRight.Stroke; 
            }
            set
            {
                lineRight.Stroke = value;
                lineLeft.Stroke = value;
            }
        }
        public double StrokeThickness
        {
            set
            {
                lineRight.StrokeThickness = value;
                lineLeft.StrokeThickness = value;
            }
            get
            {
                return lineLeft.StrokeThickness;
            }
        }
        void SetAngleByDegree(double degreeLeft,double degreeRight)
        {
            double angleSi = Math.PI * degreeLeft / 180.0;
            double x = System.Math.Sin(Math.PI * degreeLeft / 180.0);
            double y = System.Math.Sin(Math.PI * (90 - degreeLeft) / 180.0);  

            lineLeft.X2 = -ArrowLenght * x;
            lineLeft.Y2 = -ArrowLenght * y;
            x = System.Math.Sin(Math.PI * degreeRight / 180.0);
            y = System.Math.Sin(Math.PI * (90 - degreeRight) / 180.0);   
            lineRight.X2 = ArrowLenght * x;
            lineRight.Y2 = -ArrowLenght * y;
        }
        /// <summary>
        /// 根据直线的起始点和结束点的坐标设置箭头的旋转角度
        /// </summary>
        /// <param name="beginPoint"></param>
        /// <param name="endPoint"></param>
        public void SetAngleByPoint(Point beginPoint, Point endPoint)
        { 

            double x = endPoint.X - beginPoint.X;
            double y = endPoint.Y - beginPoint.Y; 
            double angle = System.Math.Atan(x/y)*180/Math.PI; 

            if(endPoint.Y < beginPoint.Y)
                SetAngleByDegree((ArrowAngle + angle) - 180, (ArrowAngle - angle) - 180);
            else
                SetAngleByDegree(ArrowAngle + angle, ArrowAngle - angle);
           

        }
        public Arrowhead()
        { 
            lineLeft = new Line();
            lineRight = new Line();  
            this.Children.Add(lineLeft);
            this.Children.Add(lineRight);
            lineLeft.X1 = 0;
            lineLeft.Y1 = 0;
            lineRight.X1 = 0;
            lineRight.Y1 = 0;
            SetAngleByPoint(new Point(0, 0), new Point(15, 15));  
        }
    }