如何让 Silverlight 实现工作流流程定义-控件新闻-慧都网

如何让 Silverlight 实现工作流流程定义

转帖|其它|编辑：郝浩|2009-03-02 10:54:05.000|阅读 1176 次

概述：如何让 Silverlight 实现工作流流程定义。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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<Grid x:Name="LayoutRoot" Background="#FF92A4AF" ShowGridLines="True">
2     <Grid.RowDefinitions>
3       <RowDefinition Height="40"/>
4       <RowDefinition Height="400"/>
5      </Grid.RowDefinitions>
6     <Grid.ColumnDefinitions>
7           <ColumnDefinition Width="600"/>
8     </Grid.ColumnDefinitions>
9     <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
10      <Button  Width=" 60" Height=" 25" Content="移动" Margin="10"  Click="Button_Click"></Button>
11     <Button  Width=" 60" Height=" 25" Content="连线" Margin="10" Click="Button_Click_1"></Button>
12            <TextBlock x:Name="Status" Foreground="Black"  Text="Status"  Margin="10"  />
13        </StackPanel>
14        <Canvas Height="400" Width="600" x:Name="canver1" Grid.Row="1" Grid.Column="0" Background="#FF92A4AF">
15    </Canvas>
16        </Grid>

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

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

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

使用Blend2绘制节点对象

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

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几何图形提供了描绘由弧线、曲线和直线组成的多个复杂图形如图：