接着之前的内容，在开始之前有几点说明：
1、我无法使用博客圆的上传图片功能，因此许多图片就省略了。
2、代码下载：http://www.shareidea.net/opensource.htm
3、在线演示：http://www.shareidea.net/workflow.htm
技术支持QQ群：85444465
本文系列索引：
使用silverlight构建一个工作流设计器(一)
使用silverlight构建一个工作流设计器(二)
使用silverlight构建一个工作流设计器(三)
使用silverlight构建一个工作流设计器(四)
使用silverlight构建一个工作流设计器(五)
使用silverlight构建一个工作流设计器(六)
使用silverlight构建一个工作流设计器(七)
使用silverlight构建一个工作流设计器(八)
使用silverlight构建一个工作流设计器(九)
使用silverlight构建一个工作流设计器(十)
使用silverlight构建一个工作流设计器(十一)
三、类的设计
在进行类设计之前，先说一下silverlight中使用怎么表示上面描述的类。在silverlight可以使用 用户控件（ silverlight user control）来描述各种具有用户界面的类，如上文所讲的活动类，规则类。操作很简单，在vs.net 2008中增加一个新的 silverlight user control 就可以了。其实是一个xaml文件。在xaml文件中布局用户界面，在对应的xaml.cs文件中编写后台方法即可。
需要说一下的是,在进行鼠标拖动活动或者规则移动时，规则和活动的动态定位使用的是相对于容器来的相对位置，也就是使用Canvas.Top和Canvas.Left属性进行定位。
还有一点需要说明的就是，对于活动和规则的关联有几点需要注意。
l 一个规则可以关联到两个不同的活动，一个为起始活动（起始端点关联）。一个为终结活动（终结端点关联）
l 规则的起始活动和终结活动不能为同一个活动。
l 任何两个规则，他们的起始活动和终结活动不能相同，也就是说在不同的两个活动之间，不能有重复的规则关联。
3.1 活动类的设计(Activity)
活动代表工作流中的一个活动节点，在流程图上表现为一个方框图，可以被拖拽，可以关联到一个规则的开始或者结束。
3.1.1 Xaml
下面的代码表示了活动类的外观
Code
1
<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.Activity"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 MouseLeftButtonDown="UserControl_MouseLeftButtonDown"
5 MouseLeftButtonUp="UserControl_MouseLeftButtonUp"
6 MouseMove="UserControl_MouseMove"
7 MouseEnter="UserControl_MouseEnter"
8 MouseLeave="UserControl_MouseLeave"
9 Width="100" Height="60" >
10 <Canvas Name="container" >
11 <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="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</UserControl>
19
从上面代码可以看出，活动类主要包含一个矩形的图形，还有一个删除按钮。图形显示如下：
3.12 后台代码
活动类主要实现主要动作（函数）
l 鼠标拖拽
l 删除
l 关联到规则(增加，删除)
l 输出活动xml描述
l 导入xml描述
还有一些主要属性：
l 活动标示（ID）
l 活动名称（Name）
l 所有关联的规则的集合
以及一些主要的事件：
l 移动
l 删除
具体代码不再贴出，大家可以下载源代码运行。
3.2 规则类的设计
规则类的实现比较有意思，主要是它的拖拽方式和活动类的拖拽方式不一样。对于活动类，拖动方式为整个活动随着鼠标进行移动。而对于规则类却不是这样。下面的图形表示了一规则类的外观。
一个规则从图形上被分成三个部分，起始端点（白色），中间线段，终结端点（黑色）（在实际环境中，应该整体表现为一个带箭头的线段，为了便于描述，先这样表示，在后面的美化部分将作修改）。这三个部分都可以被鼠标拖动，当拖动起始端点时，起始端点随着鼠标变化而变化位置，终结端点不动，中间线段根据起始端点和终结端点计算位置。拖动终结端点类似于拖动起始端点。当拖动中间线段时，整个规则图形（包括起始端点，中间线段，终结端点）随着鼠标移动而移动。
另外一个需要仔细考虑的是，当拖动规则，并且将端点移动到活动上时，进行规则和活动关联的时机。有以下几个时机可以考虑：
l 拖动规则进入活动范围。（活动的MouseEnter事件）
l 拖动规则结束后，放开鼠标。
对于第一种情况，当拖动规则并且进入互动范围时，无法触发活动的MouseEnter事件。暂时无法解决。（但是在放开鼠标，并且在活动上移动时，此时触发MouseEnter事件。但是这样做会存在某些特定的bug）。因此使用第二种方法进行关联，也就是在规则的MouseLeftButtonUp事件中遍历当前所有的活动，检查规则是否处于活动的范围内，如果在，那么就进行关联。
3.2.1 xaml
下面的代码描述了规则类的xaml
Code
1<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Designer.Rule"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 MouseEnter="UserControl_MouseEnter"
5 MouseLeave="UserControl_MouseLeave"
6 >
7 <Canvas Canvas.ZIndex="100" >
8 <Ellipse Name="begin" Canvas.Top="0" Canvas.Left="0" Canvas.ZIndex="100"
9 Width="10" Height="10" Fill="White"
10 Stroke="Black" StrokeThickness="0"
11 MouseLeftButtonDown="Point_MouseLeftButtonDown"
12 MouseLeftButtonUp="Point_MouseLeftButtonUp"
13 MouseMove="Point_MouseMove"
14 >
15 </Ellipse>
16 <Line Name="line" Canvas.ZIndex="50"
17 X1="5" Y1="5" X2="45" Y2="45"
18 Stroke="#336699" StrokeThickness="5"
19 MouseLeftButtonDown="Line_MouseLeftButtonDown"
20 MouseLeftButtonUp="Line_MouseLeftButtonUp"
21 MouseMove="Line_MouseMove"
22 >
23 </Line>
24 <Canvas Canvas.Top="40" Canvas.Left="40" Name="end" Canvas.ZIndex="100"
25 MouseLeftButtonDown="Point_MouseLeftButtonDown"
26 MouseLeftButtonUp="Point_MouseLeftButtonUp"
27 MouseMove="Point_MouseMove">
28
29 <Ellipse
30 Width="10" Height="10" Fill="Black"
31 Stroke="Black" StrokeThickness="1" >
32 </Ellipse>
33 </Canvas>
34 <HyperlinkButton Canvas.ZIndex="1000" MouseLeave="HyperlinkButton_MouseLeave" Foreground="Red" Padding="10 5 5 5" Width="65" Height="25" Canvas.Left="50" Background="Yellow" Name="btnDelete" Click="HyperlinkButton_Click" ClickMode="Release" Content="删除规则" ></HyperlinkButton>
35 </Canvas>
36</UserControl>
37
3.2.2 后台代码
规则类主要实现主要动作（函数）
l 鼠标拖拽
l 删除
l 关联到活动(增加，删除)
l 输出规则xml描述
l 导入xml描述
还有一些主要属性：
l 规则标示（ID）
l 规则名称(Name)
l 起始活动
l 结束活动
以及一些主要的事件：
l 移动
l 删除
3.3 容器类的设计
容器类主要功能就是用来提供一个设计面板，可以增加，删除工作流元素（活动，规则），导入xml和导出xml。
3.3.1 xaml
下面的容器的xaml代码
Code
1<UserControl x:Class="design.Page"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
4 <Grid x:Name="LayoutRoot" Background="#A0A0A0" ShowGridLines="False" >
5 <Grid.RowDefinitions >
6 <RowDefinition Height="35" />
7 <RowDefinition Height="*"/>
8 </Grid.RowDefinitions>
9 <Grid.ColumnDefinitions>
10 <ColumnDefinition Width="150" />
11 <ColumnDefinition Width="*"/>
12 </Grid.ColumnDefinitions>
13 <Canvas Grid.ColumnSpan="2" Grid.Row="0" Width="1150" HorizontalAlignment="Left" Grid.Column="0" Background="#0054e3" >
14 <TextBlock Margin="10 5 0 0" FontSize="16" Foreground="White" Text="流程设计器" ></TextBlock>
15 </Canvas>
16 <StackPanel Background="#e5eff8" Width="150" Height="600" Grid.Row="1" Grid.Column="0" >
17 <TextBlock Text="流程名称：" Padding="10"></TextBlock>
18 <TextBox Name="WorkFlowName" Width="130" HorizontalAlignment="Left" Margin="10 0 0 10" ></TextBox>
19 <Button VerticalAlignment="Top" Margin="5 5 10 5" HorizontalAlignment="Right" Width="60" Height="30" Background="Red" Click="AddActivity_Click" Content="添加活动" />
20 <Button VerticalAlignment="Top" Margin="5 5 10 5" HorizontalAlignment="Right" Width="60" Height="30" Background="Red" Click="AddRule_Click" Content="添加规则" />
21
22 </StackPanel>
23 <Canvas Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Name="cnsDesignerContainer" Width="1000" Height="600" Background="#dcdcdc">
24 </Canvas>
25 <Canvas Name="MessageBody" >
26 <Rectangle HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FF8A8A8A" ></Rectangle>
27 <Border Canvas.Top="200" Canvas.Left="300" CornerRadius="30" Background="#FF5C7590" Width="400" Height="200">
28 <StackPanel VerticalAlignment="Center" Margin="20" >
29 <TextBlock Name="MessageTitle" Text="消息内容" FontSize="18" HorizontalAlignment="Center" Margin="10"></TextBlock>
30 <Button Content="关闭" Width="100" Height="50" FontSize="18" Click="Button_Click" ></Button>
31 </StackPanel>
32 </Border>
33 </Canvas>
34 </Grid>
35</UserControl>
36
下图是容器的外观
3.3.2 后台代码
规则类主要实现主要动作（函数）
l 增加活动
l 删除活动
l 增加规则
l 删除规则
l 导入xml
l 导出xml
还有一些主要属性：
l 活动集合
l 规则集合
l 流程标示(ID)
l 流程名称（Name）
好了，其实也没有说什么，大家还是看代码吧，因为比较仓促，有些写得比较乱，有些也没有注释，以后会慢慢完善，既然是第一个版本，就叫做workflowDesigner.SL 0.1版吧。
下面的章节进入导出xml及根据xml文件生成流程图,并且会讨论一些更有意思的话题。
