使用silverlight构建一个工作流设计器(五)(附最新源代码及在线演示)

 

最新源代码下载：http://www.shareidea.net/opensource.htm

最新版本在线演示：http://www.shareidea.net/workflow.htm

 

技术支持QQ群：85444465

本文系列索引：

使用silverlight构建一个工作流设计器(一)

使用silverlight构建一个工作流设计器(二)

使用silverlight构建一个工作流设计器(三)

使用silverlight构建一个工作流设计器(四)

使用silverlight构建一个工作流设计器(五)

 使用silverlight构建一个工作流设计器(六)

使用silverlight构建一个工作流设计器(七)  

使用silverlight构建一个工作流设计器(八)

使用silverlight构建一个工作流设计器(九)

使用silverlight构建一个工作流设计器(十)  

使用silverlight构建一个工作流设计器(十一)  

本文主要侧重于创作一个应用程序过程中的遇到的问题以及解决问题的思路和方法（当然也包括使用silverlight遇到的问题）。并且说明解决一个问题的多个方法之间的取舍原因。当然这个原因不是绝对的，根据时间的推移和思路的延伸，我们还可以找到更加合适的解决问题的方法。

 

在这个学习silverlight的过程中，希望和大家分享一下学习的心得，关于silverlight的，关于系统设计都有，只要使我觉得比较新鲜有趣的。也希望各位大虾，新手多多指点。

五 美化

5.2活动根据不同的活动类型显示不同的形状

要是活动根据不同的类型显示不同的形状，我们也有几种方法：

l         根据类型不同，定义不同的图形显示

l         根据类型不同，对现有的活动图形进行剪裁处理。

 

第一种方法会给我们已有的类造成比较大的修改，因为涉及到图形在移动时候需要对关联的规则类进行动态定位的问题。使用第二种方法去没有这个问题，只需要动体的对活动类进行剪裁处理就可以了。

 

活动类型有以下几种：

l         常规交互活动，也就是需要人工参与的活动。

l         自动活动，没有人工参与的活动，后台自动完成。

l         分支活动，包括与分支、或分支

l         汇聚活动，包括与汇聚，或汇聚，投票汇聚。

l         起始与终结活动

 

当我们给活动指定不同的类型时，希望显示不同的活动形状。对于常规交互活动，显示矩形图形，对于分支和汇聚活动显示菱形，对于其他活动，显示圆形。

 

矩形和圆形分别用EllipseGeometry和RectangleGeometry类进行裁减就可以了，对于菱形，需要使用PathGeometry类进行裁减，这个类的使用有点复杂，需要定义多个转折点。然后这些点围成一个菱形。

 

5.3 给活动和规则增加配置界面

为了给活动设置类型，我们需要给活动增加一个配置界面，具体还是增加一个用户控件 ，xaml代码如下：

<UserControl x:Class="Shareidea.Web.UI.Control.Workflow.Setting.ActivitySetting"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
               MouseLeftButtonDown="UserControl_MouseLeftButtonDown" 
             MouseLeftButtonUp="UserControl_MouseLeftButtonUp" 
             MouseMove="UserControl_MouseMove" 
    >
    <Grid x:Name="LayoutRoot"  > 
        <Border  Background="Gold" CornerRadius="30"  >
            <StackPanel VerticalAlignment="Top" Margin="20"  >
                <Grid ShowGridLines="False">
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="30"  ></RowDefinition>
                        <RowDefinition Height="30"  ></RowDefinition> 
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition  Width="60" ></ColumnDefinition>
                        <ColumnDefinition  Width="200"></ColumnDefinition> 
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="活动名称" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0"></TextBlock>
                    <TextBlock Text="活动类型" VerticalAlignment="Center" HorizontalAlignment="Left"  Grid.Column="0" Grid.Row="1"></TextBlock>
                    <TextBox Name="txtActivityName" Width="200"  VerticalAlignment="Center" HorizontalAlignment="Left"  Grid.Column="1" Grid.Row="0"></TextBox>
                    <ComboBox Name="cbActivityType" Width="200"  VerticalAlignment="Center" HorizontalAlignment="Left"  Grid.Column="1" Grid.Row="1">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" >
                                    <TextBlock Text="{Binding Path=Name}"  Visibility="Collapsed" />
                                    <TextBlock Text="{Binding Path=Text}" VerticalAlignment="Center"/>
                                </StackPanel> 
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </Grid>
                <StackPanel VerticalAlignment="Center"  HorizontalAlignment="Center"  Margin="0 10 0 0" Orientation="Horizontal"  >
                    <Button Name="btnSave" Content="保存" Margin="0 0 0 0"  Width="60" Height="30" Click="btnSave_Click" ></Button>
                    <Button Name="btnClose" Content="关闭" Margin="10 0 0 0"   Width="60" Height="30" Click="btnClose_Click" ></Button>
                </StackPanel>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

 

 上面的代码有两点需要介绍的：

l         ComboBox控件。Silverlight2.0中没有dropdownlist控件，但是有一个更加强大和灵活的ComboBox控件。ComboBox可以使用内容模板的方式添加子元素(Item)，我们可以使用任意一个silverlight控件作为ComboBox的子元素，这样就给我们很大的灵活性，用来构造复杂的下拉框内容了。

l         控件的绑定语法。在上面的xaml代码中，使用到了类似于<TextBlock Text="{Binding Path=Name}" 这样的代码，这个是silverlight的绑定语法。在后台代码中， 使用下面的代码进行绑定

      

public ActivitySetting()
        {
            InitializeComponent();
            List<ActivityTypeItem> Cus = new List<ActivityTypeItem>();
            Cus.Add(new ActivityTypeItem("AND_BRANCH", "与分支活动"));
            Cus.Add(new ActivityTypeItem("AND_MERGE", "与汇聚活动"));
            Cus.Add(new ActivityTypeItem("AUTOMATION", "常规自动活动"));
            Cus.Add(new ActivityTypeItem("COMPLETION", "终结活动"));
            Cus.Add(new ActivityTypeItem("DUMMY", "哑活动"));
            Cus.Add(new ActivityTypeItem("INITIAL", "初始化活动"));
            Cus.Add(new ActivityTypeItem("INTERACTION", "常规交互活动"));
            Cus.Add(new ActivityTypeItem("OR_BRANCH", "或分支"));
            Cus.Add(new ActivityTypeItem("OR_MERGE", "或汇聚活动"));
            Cus.Add(new ActivityTypeItem("SUBPROCESS", "子流程"));
            Cus.Add(new ActivityTypeItem("VOTE_MERGE", "投票汇聚活动"));

            cbActivityType.ItemsSource = Cus;

        }
        public class ActivityTypeItem
        {
            public string Name { get; set; }
            public string Text { get; set; }
            public ActivityTypeItem(string name, string text)
            {
                Name = name;
                Text = text;
            }
        }

 

  对于规则的配置类似于上面的步骤，这里不再赘述 。