使用silverlight構建一個工作流程設計工具(六)(附最新原始碼及線上示範)

 

最新原始碼下載：http://shareidea.net/opensource.htm

最新版本線上示範：http://www.shareidea.net/workflow.htm

 

支援人員QQ群：85444465

本文系列索引：

使用silverlight構建一個工作流程設計工具(一)

使用silverlight構建一個工作流程設計工具(二)

使用silverlight構建一個工作流程設計工具(三)

使用silverlight構建一個工作流程設計工具(四)

使用silverlight構建一個工作流程設計工具(五)

 使用silverlight構建一個工作流程設計工具(六)

使用silverlight構建一個工作流程設計工具(七)  

使用silverlight構建一個工作流程設計工具(八)

使用silverlight構建一個工作流程設計工具(九)

使用silverlight構建一個工作流程設計工具(十)  

使用silverlight構建一個工作流程設計工具(十一)  

本章繼續美化工作，本章內容相當簡單，權當一段流水賬好了。下一章的內容將增加一個非常優秀的使用者體驗功能，這個功能也是受到網友的啟發增加的，敬請關注。

五 美化

本章內容主要包括

1、 規則圖形支援曲線

2、 增加預設初始化流程圖形

3、 支援滑鼠雙擊事件

4、 控制項支援ToopTip

5、   自訂容器寬和高

5.4 規則圖形支援曲線

在前面的內容中，用來表示規則類的圖形一條直線，當有兩個規則互為反向規則時（這兩個規則的起始活動和結束活動正好對調），那麼這兩個規則的直線就重疊在一起了，不好區別。所以在這裡把這個直線改為曲線。用來表示這個改變 :

需要做幾個工作，首先在規則類（Rule.xaml）中，把表示直線類(Line)換成表示曲線的類Polyline，在前面的內容中，我們使用兩個點來定位直線，在換成新的Polyline類後，這部分代碼不需要做大的改變，只需要在增加一個中間點，這個中間點表示曲線的轉折點，而這個轉折點的座標可以根據起始座標和終點座標而定，非常簡單。下面的代碼錶示了我們新的定位規則曲線的方法。

 

Code
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 增加預設初始化流程圖形

前面的程式在初始化時，容器面板是一片空白，這本章中增加一個初始化的流程圖形。代碼很簡單。 

 

Code
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(100, 100);
            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

ToopTip比Html元素中的ToopTip在定製外觀方面強大多了，下面是程式中用到ToopTip的xaml代碼

 

Code
<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來動態改變容器物件的寬和高，沒有更多需要解釋的了。 

下章的內容很精彩，不要錯過哦。