本章繼續工作流設計器的工作，主要完成一個設計器的雛形，并提供一個可執行的工程供下載。
在進行類設計之前，先說一下silverlight中使用怎么表示上面描述的類。在silverlight可以使用 用戶控件（ silverlight user control）來描述各種具有用戶界面的類，如上文所講的活動類，規則類。操作很簡單，在vs.net 2008中增加一個新的 silverlight user control 就可以了。其實是一個xaml文件。在xaml文件中布局用戶界面，在對應的xaml.cs文件中編寫后臺方法即可。
接著之前的內容，在開始之前有幾點說明：
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文件生成流程圖,并且會討論一些更有意思的話題。
浙公網安備 33010602011771號