Build a workflow designer using Silverlight (6) (with the latest source code and Online Demo)

LatestSource codeDownload: http://shareidea.net/opensource.htm

Online Demo: http://www.shareidea.net/workflow.htm Latest Version

 

Technical support QQ: 85444465

Series of indexes in this article:

Using Silverlight to build a workflow designer (1)

Build a workflow designer using Silverlight (2)

Using Silverlight to build a workflow designer (3)

Build a workflow designer using Silverlight (4)

Build a workflow designer using Silverlight (5)

Build a workflow designer using Silverlight (6)

Using Silverlight to build a workflow designer (7)

Using Silverlight to build a workflow designer (8)

Using Silverlight to build a workflow designer (9)

Build a workflow designer using Silverlight (10)

Build a workflow designer using Silverlight (11)

This chapter continues to beautify the work. The content of this chapter is quite simple, and the right to use it as a piece of stream. The content in the next chapter will provide an excellent user experience function, which is also inspired by netizens. Please stay tuned.

5. beautification

This chapter mainly includes

1,Rule graphics support Curves

2,Add the default initialization flow chart

3,Double-click event

4,Control SupportTooptip

5,Custom container width and height

5.4 Rule graphics support Curves

In the preceding content, a straight line is used to represent the rule type. When there are two rules that are opposite to each other (the start and end activities of these two rules are exactly the same ), the straight lines of these two rules overlap, so it is difficult to distinguish between them. So here we change this line to a curve. Used to indicate this change:

You need to do a few work, first in the Rule class (Rule. XAML).Line is replaced by a curve class.PolylineIn the previous content, we used two points to locate the straight line. After the new polyline class is changed, this partCodeYou don't need to make a big change. You just need to add an intermediate point, which indicates the turning point of the curve. The coordinates of the turning point can be determined by the starting coordinate and the ending coordinate, which is very simple. The following code shows our new method for locating the rule curve.

 

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= NewPoint ();

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 );
}

In addition, you can add the rule line type configuration information to the rule configuration class.

5.5 Add the default initialization flow chart

PreviousProgramDuring initialization, the container panel is blank. This chapter adds an initialized flow chart. The code is simple.

 

Code
Void Createnewworkflow ()
{
Activity begin =   New Activity ( This );
Begin. Type = Activitytype. Initial;
Begin. activityname =   " Start " ;
Activity end =   New Activity ( This );
End. Type = Activitytype. completion;
End. activityname =   " End " ;
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 );
}

The last section stores the current configuration in the memory.

5.6 Double-click event

Silverlight2.0Double-click events are not supported, but this does not affect the use of existing functions to capture double-click mouse events.ArticleThe principles are described as follows:

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

A timer is used to check the time difference between two mouse clicks. If the time difference is within a specified range, the two clicks are considered as a double-click event. 

When you click on a rule or activity, the click event is captured and the edit window of the rule or attribute is displayed.

5.7 Activity and rule support Tooptip

TooptipRatioHtmlElementTooptipIt is much more powerful in terms of custom appearance, which is used in the program belowTooptipOfXAMLCode

 

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 Custom container width and height

Custom width and height controls usedSliderEvent valuechanged to dynamically change the width and height of the container object. There is no more to be explained.

The content in the next chapter is wonderful. Do not miss it.