使用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代码如下:

 

Code

 

 

 

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

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

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

 

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

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

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

 

下面是转折点类的代码:

Code

 

6.9 活动对齐功能

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

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

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

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

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

 

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

代码如下所示:

 

Code

 

 

你可能感兴趣的:(silverlight)