使用silverlight构建一个工作流设计器(十一)(附源代码下载、在线演示、视频教程)

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

在线演示：http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html 

技术支持QQ群：85444465

本文系列索引： 

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

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

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

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

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

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

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

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

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

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

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

本章包含以下内容：

l         规则曲线支持两个中间点的移动

l         双击规则中间点，自定对齐曲线

l         增加选定活动的左右、上下对齐功能

 

六、增强的用户体验功能

6.8规则曲线支持两个中间点的移动

在前面的规则图形中，也支持曲线类型的线条，但是线条的转折点是自动生成的，根据网友的反馈，希望增加可以用户自己移动的转折点，效果图如下：

为了使得程序清晰，更加面向对象，对于转折点我们使用一个单独的类（用户控件）来表示，这个转折点类只包含一个圆（Ellipse）。Xmal代码如下：

 

<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.RuleTurnPoint"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    >
    <Canvas>
        <Canvas.Resources>
            <Storyboard  x:Name="sbDisplay">
                <DoubleAnimation   From="0" To="0.8" Duration="00:00:1.0" 
                    Storyboard.TargetName="eliTurnPoint" 
                    Storyboard.TargetProperty="Opacity" >
                </DoubleAnimation>
            </Storyboard>
           
            <Storyboard  x:Name="sbColse">
                <DoubleAnimation   From="0.8" To="0.0" Duration="00:00:1.0" 
                    Storyboard.TargetName="eliTurnPoint" 
                    Storyboard.TargetProperty="Opacity" >
                </DoubleAnimation>
            </Storyboard>  
        </Canvas.Resources>

        <Ellipse Name="eliTurnPoint" Width="8" Height="8" Fill="Green" Opacity="0.8"
                 MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
        MouseLeftButtonUp="Canvas_MouseLeftButtonUp"
        MouseMove="Canvas_MouseMove"
                 ></Ellipse>
    </Canvas>
</UserControl>

 

 

 

转折点是动态增加到规则类中的，转折点向外暴露两个事件。

l         转折点拖拽移动事件：当转折点被鼠标拖拽移动时，需要重新设置规则的直线坐标点。

l         转折点双击事件：当双击转折点时，需要重新设定规则的直线坐标，自动对其线段。

 

转折点包含两个重要的属性：

l         Radius：转折点图形的半径。

l         CenterPosition：转折点的中心坐标(相对Canvas的坐标 )。

 

下面是转折点类的代码：

 public partial class RuleTurnPoint : UserControl
    {
        public delegate void RuleTurnPointMoveDelegate(object sender, MouseEventArgs e, Point newPoint);

        public  delegate void DoubleClickDelegate(object sender, EventArgs e);

        public event RuleTurnPointMoveDelegate RuleTurnPointMove;
        public RuleTurnPoint()
        {
            InitializeComponent();
            _doubleClickTimer = new System.Windows.Threading.DispatcherTimer();
            _doubleClickTimer.Interval = new TimeSpan(0, 0, 0, 0, 200);
            _doubleClickTimer.Tick += new EventHandler(_doubleClickTimer_Tick);
        }

        void _doubleClickTimer_Tick(object sender, EventArgs e)
        {
            _doubleClickTimer.Stop();
        }
        public  Brush Fill
        {
            get
            {
                return eliTurnPoint.Fill;
            }
            set
            {
                eliTurnPoint.Fill = value;
            }
        }
        public void ShowDisplayAutomation()
        {
            sbDisplay.Begin();
        }
        public void ShowCloseAutomation()
        {
            sbColse.Begin();
        }

        private void Canvas_MouseEnter(object sender, MouseEventArgs e)
        {

        }
        Point mousePosition;
        bool trackingMouseMove = false;
        bool hadActualMove = false;
        System.Windows.Threading.DispatcherTimer _doubleClickTimer;
        public event DoubleClickDelegate OnDoubleClick;
        private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            e.Handled = true;
            if (_doubleClickTimer.IsEnabled)
            {
                _doubleClickTimer.Stop();
                if (OnDoubleClick != null)
                    OnDoubleClick(this, e);
            }
            else
            {
                _doubleClickTimer.Start();
                FrameworkElement element = sender as FrameworkElement;
                mousePosition = e.GetPosition(null);
                trackingMouseMove = true;
                hadActualMove = false;
                if (null != element)
                {
                    element.CaptureMouse();
                    element.Cursor = Cursors.Hand;
                }
            }
        }

        private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            e.Handled = true;
            FrameworkElement element = sender as FrameworkElement;
            hadActualMove = false;
            trackingMouseMove = false;
            element.ReleaseMouseCapture();
            mousePosition = e.GetPosition(null);
            element.Cursor = null;
             
        }
        public double Radius
        {
            get
            {
                return eliTurnPoint.Width / 2;
            }
        }
        public Point CenterPosition {
            get
            {
                return new Point((double)this.GetValue(Canvas.LeftProperty) + Radius, (double)this.GetValue(Canvas.TopProperty) + Radius);
            }
            set
            {
                this.SetValue(Canvas.LeftProperty, value.X - Radius);
                this.SetValue(Canvas.TopProperty, value.Y - Radius);
            }
        }
        private void Canvas_MouseMove(object sender, MouseEventArgs e)
        {
            
            if (trackingMouseMove)
            {
                FrameworkElement element = sender as FrameworkElement;
                element.Cursor = Cursors.Hand;

                if (e.GetPosition(null) == mousePosition)
                    return;
                hadActualMove = true;
                double deltaV = e.GetPosition(null).Y - mousePosition.Y;
                double deltaH = e.GetPosition(null).X - mousePosition.X;
                double newTop = deltaV + CenterPosition.Y;
                double newLeft = deltaH + CenterPosition.X;

                Point p  =  new Point(newLeft, newTop);
                CenterPosition = p;

                if (RuleTurnPointMove != null)
                {
                    RuleTurnPointMove(sender, e,p);
                }
                mousePosition = e.GetPosition(null);

            }
        }
}

 

6.9 活动对齐功能

对于选中的活动，可以按照下面4种方式对齐：

l         向左对齐：选中活动的X坐标设置为其中X坐标最小的值。

l         向右对齐：选中活动的X坐标设置为其中X坐标最大的值。

l         向上对齐：选中活动的Y坐标设置为其中X坐标最小的值。

l         向下对齐：选中活动的Y坐标设置为其中X坐标最大的值。

 

为了需要两次遍历选中的活动集合。第一次遍历取得其中X/Y坐标的最小/最大值，第二次遍历设置活动的X/Y坐标为最小/最大值。

代码如下所示：

 

public void AlignTop()
       {
           if (CurrentSelectedControlCollection == null || CurrentSelectedControlCollection.Count == 0)
               return;
           Activity a = null;
           double minY = 100000.0;
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;

                   if (a.CenterPoint.Y < minY)
                       minY = a.CenterPoint.Y;
               }


           }
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;
                   a.CenterPoint = new Point(a.CenterPoint.X, minY);
               }


           }
       }
       public void AlignBottom()
       {
           if (CurrentSelectedControlCollection == null || CurrentSelectedControlCollection.Count == 0)
               return;
           Activity a = null;
           double maxY = 0;
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;

                   if (a.CenterPoint.Y >maxY)
                       maxY = a.CenterPoint.Y;
               }


           }
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;
                   a.CenterPoint = new Point(a.CenterPoint.X, maxY);
               }


           }
       }
       public void AlignLeft()
       {

           if (CurrentSelectedControlCollection == null || CurrentSelectedControlCollection.Count == 0)
               return;
           Activity a = null;
           double minX = 100000.0;
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;

                   if (a.CenterPoint.X < minX)
                       minX = a.CenterPoint.X;
               }


           }
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;
                   a.CenterPoint = new Point(minX, a.CenterPoint.Y);
               }


           } 

           

       }
       public void AlignRight()
       {
           if (CurrentSelectedControlCollection == null || CurrentSelectedControlCollection.Count == 0)
               return;
           Activity a = null;
           double maxX = 0;
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;

                   if (a.CenterPoint.X > maxX)
                       maxX = a.CenterPoint.X;
               }


           }
           for (int i = 0; i < CurrentSelectedControlCollection.Count; i++)
           {
               if (CurrentSelectedControlCollection[i] is Activity)
               {
                   a = CurrentSelectedControlCollection[i] as Activity;
                   a.CenterPoint = new Point(maxX, a.CenterPoint.Y);
               }


           }
       }