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

核心提示： 3.2.2 后台代码规则类主要实现主要动作（函数）l 鼠标拖拽l 删除l 关联到活动(增加，删除)l 输出规则xml描述l 导入xml描述还有一些主要属性：l 规则标示（ID）l 规则名称(Name)l 起始活动l 结束活动以及一些主要的事件：l 移动l 删除3.3 容器类的设计容器类主要

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代码

　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文件生成流程图,并且会讨论一些更有意思的话题。