使用Silverlight 实现工作流流程定义

核心提示：Silverlight 是一种跨浏览器、跨平台的 .NET Framework实现，具有如下优势：提供一致的体验，使用Silverlight 实现工作流流程定义，而与在何处运行没有关系它对视频和音频进行流处理，它将视频品质调整到适合各种环境：从移动设备到桌面浏览器以及 720p HDTV 视频模式用户可以直接在浏览器中

Silverlight 是一种跨浏览器、跨平台的 .NET Framework实现。具有如下优势：

提供一致的体验，而与在何处运行没有关系

它对视频和音频进行流处理。它将视频品质调整到适合各种环境：从移动设备到桌面浏览器以及 720p HDTV 视频模式

用户可以直接在浏览器中操作（拖动、旋转和缩放）的足够清晰的2D和3D图形

我们可以直接使用它在Web上来完成工作流流程的定义，直接绘制可拉伸，拖放的复杂图形，获得非常好的用户体验。而这在以前只能通过GDI+或者其他并不友好的方法实现。重要的是这一切实现的代码非常简洁。

你需要以下工具来实现：

1.　　　　　　 Visual Studio 2008

2.　　　　　　 VS2008SP1

3.　　　　　　 Silverlight Tools

4.　　　　　　 Expression Blend2

在完成绘图之前要对Silverlight的绘图平面有详细的了解。

Silverlight提供三个根布局对象来定义整个绘图面，这三个绘图的布局对象皆从Panel 元素的派生，可以实现许多复杂的布局。

Canvas	定义一个区域，在此区域内，您可以使用相对于 Canvas 区域的坐标显式定位子元素。
Grid	定义由行和列组成的灵活网格区域。
StackPanel	将子元素排列成一行（可沿水平或垂直方向）。

　

此次演练我们将使用Grid元素完成整个页面布局。使用Canvas定义整个可拖放的绘图面，使用StackPanel元素来排列自定义的活动节点用户控件。

在这过程中主要涉及两个重要的对象

1.　　　　 节点对象 定义工作流的每一个活动，可以显示一个活动的个性图标，名称等等信息，要可以自由拖动，拖动时相关坐标的活动间连线可以自动绘制。

2.　　　　 连线可以自由拉伸的有向折线，终点绘制箭头，绘制过程中实现动态效果，自动粘结节点对象。

　

使用Blend2绘制节点对象

<StackPanel　x:Name="CFlowItem"　Background="{x:Null}"　>
　　　　　　　　<Border　BorderThickness="1,1,1,1"
　　　　　　　　　　　　Width="68"　Height="41"　　x:Name="fItem"　CornerRadius="5,5,5,5">
　　　　　　　　　　　　<Border.BorderBrush>
　　　　　　　　　　　　　　　　<LinearGradientBrush　EndPoint="0.5,1"　StartPoint="0.5,0"　SpreadMethod="Pad">
　　　　　　　　　　　　　　　　　　　　<GradientStop　Color="#FF8C8585"　Offset="1"/>
　　　　　　　　　　　　　　　　　　　　<GradientStop　Color="#FFFFFFFF"　Offset="0"/>
　　　　　　　　　　　　　　　　</LinearGradientBrush>
　　　　　　　　　　　　</Border.BorderBrush>
　　　　　　　　　　　　<Border.Background>
　　　　　　　　　　　　　　　　<LinearGradientBrush　EndPoint="0.5,1"　StartPoint="0.5,0">
　　　　　　　　　　　　　　　　　　　　<GradientStop　Color="#FFEDEEF2"/>
　　　　　　　　　　　　　　　　　　　　<GradientStop　Color="#FF545151"　Offset="1"/>　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　<GradientStop　Color="#FF999EB6"　Offset="0.424"/>
　　　　　　　　　　　　　　　　　　　　<GradientStop　Color="#FFD3D9EB"　Offset="0.99099999666213989"/>
　　　　　　　　　　　　　　　　</LinearGradientBrush>
　　　　　　　　　　　　</Border.Background>
　　　　　　　　　　　　<Image　Source="../images/png-0011.png"　Stretch="Fill"　Width="35"　Height="35"　x:Name="img"></Image>
　　　　　　　　</Border>
　　　　　　　　　　　　<TextBlock　　x:Name="fItemName"　Margin="3"　Text="审核单据"　Width="50"　Height="20"　Foreground="#FF121111"></TextBlock>
</StackPanel>

以下是节点移动时自动绘制的部分代码

public　void　Move(Point　mousePoint,　Point　mousePosition)
　　　　　　　　{

　　　　　　　　　　　　double　deltaV　=　mousePoint.Y　-　mousePosition.Y;
　　　　　　　　　　　　double　deltaH　=　mousePoint.X　-　mousePosition.X;
　　　　　　　　　　　　double　newTop　=　deltaV　+　(double)this.GetValue(Canvas.TopProperty);
　　　　　　　　　　　　double　newLeft　=deltaH　+　(double)this.GetValue(Canvas.LeftProperty);
　　　　　　　　　　　　this.SetValue(Canvas.TopProperty,　newTop);
　　　　　　　　　　　　this.SetValue(Canvas.LeftProperty,　newLeft);
　　　　　　　　　　　　foreach　(PathLine　l　in　list)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　l.DrawPath();
　　　　　　　　　　　　}
　　　　　　　　}

使用Path对象来绘制连线，Silverlight几何图形提供了描绘由弧线、曲线和直线组成的多个复杂图形 如图：

在实现拖放功能中，分为三个步骤：

1.移动到目标上，选择要拖动的对象

1.按下鼠标，触发MouseLeftButtonDown事件。

2.移动鼠标，触发MouseMove事件，移动选择的对象。

3.放开鼠标，触发MouseLeftButtonUp事件，停止捕捉事件。

FlowItem EnterItem = null;
　　　　　　　 void item_MouseEnter(object sender, MouseEventArgs e)
　　　　　　　 {
　　　　　　　　　　　 EnterItem = (FlowItem)sender;
　　　　　　　 }
　　　　　　　 void item_MouseLeave(object sender, MouseEventArgs e)
　　　　　　　 {
　　　　　　　　　　　　 EnterItem =null;
　　　　　　　 }
　　　　　　　
　　　　　　　 void MMouseMove(object sender, MouseEventArgs e)
　　　　　　　 {
　　　　　　　　　　　 Point point = e.GetPosition(this.canver1);
　　　　　　　　　　　 String msg = "x:y = " + e.GetPosition(sender as FrameworkElement).ToString();
　　　　　　　　　　　 //msg += " from " + (e.OriginalSource as FrameworkElement).Name;
　　　　　　　　　　　 Status.Text = msg;

　　　　　　　　　　　 if (this.IsMove)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 if (currentItem != null)
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 currentItem.Move(point, mousePosition);

　　　　　　　　　　　　　　　 }
　　　　　　　　　　　 }
　　　　　　　　　　　 else
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 if (currentPath != null)
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 currentPath.EndP = point;
　　　　　　　　　　　　　　　　　　　 //currentPath.DrawPath();
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　 }
　　　　　　　　　　　 mousePosition = point;
　　　　　　　 }

　　　　　　　 void MMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
　　　　　　　 {
　　　　　　　　　　　 if (this.IsMove)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 this.canver1.ReleaseMouseCapture();

　　　　　　　　　　　　　　　 mousePosition.X = mousePosition.Y = 0;
　　　　　　　　　　　 }
　　　　　　　　　　　 else
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 if (this.currentPath == null) return;
　　　　　　　　　　　　　　　 if (EnterItem==null)
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 currentPath.Remove();
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　 else
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 currentPath.EndItem = EnterItem;
　　　　　　　　　　　　　　　　　　　 currentPath.DrawPath();
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　
　　　　　　　　　　　 }
　　　　　　　　　　　 currentItem = null;
　　　　　　　　　　　 EnterItem = null;
　　　　　　　　　　　 currentPath = null;
　　　　　　　 }

　　　　　　　 void MMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
　　　　　　　 {
　　　　　　　　　　　 if (EnterItem == null) return;
　　　　　　　　　　　 if (this.IsMove)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 mousePosition = e.GetPosition(this.canver1);
　　　　　　　　　　　　　　　 this.currentItem = EnterItem;
　　　　　　　　　　　　　　　 this.canver1.CaptureMouse();

　　　　　　　　　　　 }
　　　　　　　　　　　 else
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 currentPath = new PathLine(this.canver1);
　　　　　　　　　　　　　　　 currentPath.StateP = e.GetPosition(this.canver1);
　　　　　　　　　　　　　　　 //currentPath.EndP = currentPath.StateP;
　　　　　　　　　　　　　　　 currentPath.StateItem = (FlowItem)EnterItem;
　　　　　　　　　　　　　　　 //EnterItem.CaptureMouse();
　　　　　　　　　　　　　　　 //EnterItem.Cursor = null;

　　　　　　　　　　　 }
　　　　　　　 }

图片看不清楚？请点击这里查看原图（大图）。