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

作者:互联网   出处:控件中国网   2014-11-05 19:16:44   阅读:1

本章继续美化工作,本章内容相当简单,权当一段流水账好了。下一章的内容将增加一个非常优秀的用户体验功能,这个功能也是受到网友的启发增加的,敬请关注。

五 美化

本章内容主要包括

1、 规则图形支持曲线

2、 增加默认初始化流程图形

3、 支持鼠标双击事件

4、 控件支持ToopTip

5、   自定义容器宽和高

5.4 规则图形支持曲线

在前面的内容中,用来表示规则类的图形一条直线,当有两个规则互为反向规则时(这两个规则的起始活动和结束活动正好对调),那么这两个规则的直线就重叠在一起了,不好区别。所以在这里把这个直线改为曲线。用下图来表示这个改变 :

 

需要做几个工作,首先在规则类(Rule.xaml)中,把表示直线类(Line)换成表示曲线的类Polyline,在前面的内容中,我们使用两个点来定位直线,在换成新的Polyline类后,这部分代码不需要做大的改变,只需要在增加一个中间点,这个中间点表示曲线的转折点,而这个转折点的坐标可以根据起始坐标和终点坐标而定,非常简单。下面的代码表示了我们新的定位规则曲线的方法。

 


public void SetRulePosition(Point beginPoint, Point endPoint)
        {
            begin.SetValue(Canvas.LeftProperty, beginPoint.X);
            begin.SetValue(Canvas.TopProperty, beginPoint.Y);

            end.SetValue(Canvas.LeftProperty, endPoint.X);
            end.SetValue(Canvas.TopProperty, endPoint.Y);  

            Point p1 
= new Point(beginPoint.X + beginPointRadius, beginPoint.Y + beginPointRadius);
            Point p3 
= new Point(endPoint.X + endPointRadius, endPoint.Y + endPointRadius);

            Point p2 
= new Point();

            
if (LineType == RuleLineType.Line)
            {
                p2 
= p1;
            }
            
else
            {
                
if (System.Math.Abs(p1.X - p3.X) < 10)
                {
                    p2 
= p1;
                }
                
else
                {
                    p2.X 
= p1.X;
                    p2.Y 
= p3.Y; 
                    
                }
            } 
            line.Points.Clear();  
            line.Points.Add(p1);
            line.Points.Add(p2);
            line.Points.Add(p3);  
        }

 

另外在规则配置类中增加规则线条类型的配置信息就可以了。

 

5.5 增加默认初始化流程图形

前面的程序在初始化时,容器面板是一片空白,这本章中增加一个初始化的流程图形。代码很简单。 

 


void createNewWorkFlow()
        {
            Activity begin 
= new Activity(this);
            begin.Type 
= ActivityType.INITIAL;
            begin.ActivityName 
= "开始";
            Activity end 
= new Activity(this);
            end.Type 
= ActivityType.COMPLETION;
            end.ActivityName 
= "结束";
            Rule r 
= new Rule(this);
            AddActivity(begin);
            AddActivity(end);
            AddRule(r);
            r.SetBeginActivity(begin);
            r.SetEndActivity(end);
            end.Position 
= new Point(100100);
            SaveChange(NextOrPreAction.None);
        }

 

最后一段将当前的配置保存在内存中。

5.6 支持鼠标双击事件

Silverlight2.0中不支持鼠标双击事件,不过这不影响我们使用现有的功能来捕获鼠标双击,网上有一篇文章说明了其中的原理,如下:

http://silverlight.net/blogs/msnow/archive/2009/01/15/silverlight-tip-of-the-day-82-how-to-implement-double-click.aspx

主要使用一个定时器来检查鼠标两次点击之间的时间差,如果这个时间差在一个指定的范围内,那么这两次点击被认为是一次鼠标双击事件。 

当在规则或者活动上面进行鼠标点击时,将捕获这个点击事件,并且显示规则或者属性的编辑窗口。

 

 

5.7 活动和规则类支持ToopTip

ToopTipHtml元素中的ToopTip在定制外观方面强大多了,下面是程序中用到ToopTipxaml代码

 


<ToolTipService.ToolTip> 
            
<ToolTip Name="ttActivityTip" Content="Turtle" FontWeight="Bold" VerticalOffset="10"
                 HorizontalOffset
="10" >  
                
<ToolTip.Background>
                    
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
                        
<GradientStop Color="White"
                                 Offset
="0"></GradientStop> 
                        
<GradientStop Color="DarkCyan"
                                 Offset
="0.8"></GradientStop>
                    
</LinearGradientBrush>
                
</ToolTip.Background>
            
</ToolTip>
        
</ToolTipService.ToolTip>

 

5.8 自定义容器宽和高

自定义宽和高用到了控件Slider,通过事件ValueChanged来动态改变容器对象的宽和高,没有更多需要解释的了。 

下章的内容很精彩,不要错过哦。(本文由控件中国网转载)

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat