使用silverlight构建一个图形化流程设计器（二）

使用silverlight构建一个图形化流程设计器（二）2009-11-09 cnblogs chegan

接着之前的内容，在开始之前有几点说明：

1、我无法使用博客圆的上传图片功能，因此许多图片就省略了。

2、代码放在codeplex上（http://workflowdesigner.codeplex.com/），如果您有兴趣的话，欢迎加入一起开发。

3、在线演示：http://219.153.66.61/wf

三、类的设计

在进行类设计之前，先说一下silverlight中使用怎么表示上面描述的类。在silverlight可以使用用户控件（ silverlight user contro）来描述各种具有用户界面的类，如上文所讲的活动类，规则类。操作很简单，在vs.net 2008中增加一个新的 silverlight user contro就可以了。其实是一个xaml文件。在xaml文件中布局用户界面，在对应的xam.cs文件中编写后台方法即可。

需要说一下的是,在进行鼠标拖动活动或者规则移动时，规则和活动的动态定位使用的是相对于容器来的相对位置，也就是使用Canvas.Top和Canvas.Left属性进行定位。

还有一点需要说明的就是，对于活动和规则的关联有几点需要注意。

一个规则可以关联到两个不同的活动，一个为起始活动（起始端点关联）。一个为终结活动（终结端点关联）

规则的起始活动和终结活动不能为同一个活动。

任何两个规则，他们的起始活动和终结活动不能相同，也就是说在不同的两个活动之间，不能有重复的规则关联。

3.1 活动类的设计（Activity）

活动代表工作流中的一个活动节点，在流程图上表现为一个方框图，可以被拖拽，可以关联到一个规则的开始或者结束。

3.1.1 Xam

下面的代码表示了活动类的外观

1<UserControx:Class="Shareidea.Web.UI.Contro.Workflow.Designer.Activity"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xam/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xam"
4 MouseLeftButtonDown="UserContro_MouseLeftButtonDown"
5 MouseLeftButtonUp="UserContro_MouseLeftButtonUp"
6 MouseMove="UserContro_MouseMove"
7 MouseEnter="UserContro_MouseEnter"
8 MouseLeave="UserContro_MouseLeave"
9 Width="100" Height="60" >
10 <Canvas Name="container"    >
11  <Rectangle  HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Fil="Green" />
12  <Border  CornerRadius="10"   Background="Green" Opacity="0.9" Width="100" Height="60" >
13  <TextBox Name="Title" Text="新建活动" BorderBrush="Green" FontSize="12"  Background="Green"
14  Height="30"   Width="60" MouseEnter="TextBox_MouseEnter" ></TextBox>
15  </Border>
16  <HyperlinkButton Canvas.ZIndex="10000"  Padding="10 5 5 5" MouseLeave="HyperlinkButton_MouseLeave"  Foreground="Red" Width="65" Height="25"  Canvas.Top="50" Canvas.Left="100" Background="Yellow" Name="btnDelete"  Click="HyperlinkButton_Click" ClickMode="Release" Content="删除活动" ></HyperlinkButton>
17 </Canvas>
18</UserContro>
19

从上面代码可以看出，活动类主要包含一个矩形的图形，还有一个删除按钮。图形显示如下：