Build a workflow designer using Silverlight (7) (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 consists of two parts: one is to drag the mouse on the activity class to automatically generate rules, and the other is the feedback from netizens, that is, the rule endpoint should not be in the center of the activity, but on the edge of the activity.

5. beautification 5.9 Automatically generate rules by dragging the mouse

This chapter provides an excellent user experience function for the system. To set a rule, follow these steps:

 

LClick Add Rules Button to add a rule to the container.

LDrag the starting part of the rule to join an activity.

LDrag the end of a rule to associate it with an activity.

 

It's easy to move the mouse, but is there anything simpler? Of course, when you press the mouse in the central area of the activity and drag the mouse, a temporary rule is automatically generated, and the START activity of the rule is automatically associated with the activity you just clicked, the ending point of the temporary rule moves with the mouse. This process is used to describe:

Next, let's take a look at what needs to be done to complete the above functions.

1.A central area needs to be determined at the activity

In the activityXAMLAdd a circular chart to the file, with the rule center as the center point. For clarity, the center area is filled in yellow and the transparency is set0.3.

2.Central monitoring areaDomainMouseleftbuttondownEvent

When you press the mouse in the center area, a temporary rule is automatically generated, and the starting activity of the rule is set as the current activity. The rule is passed to the global temporary rule in step 3,CodeAs follows:

Code
If (_ Container. currenttemporaryrule =   Null )
{
_ Container. currenttemporaryrule =   New Rule (_ container );
_ Container. currenttemporaryrule. istemporaryrule =   True ;
_ Container. addrule (_ container. currenttemporaryrule );
_ Container. currenttemporaryrule. setbeginactivity ( This );
_ Container. currenttemporaryrule. endpointposition = _ Container. currenttemporaryrule. beginpointposition;
_ Container. currenttemporaryrule. zindex = _ Container. nextmaxindex;

}

1.Set a global temporary rule object in the container class

To capture the automatically generated temporary rule at the container level, you need to define a rule reference at the container level..Public rule currenttemporaryrule {Get; set ;}

2.Monitor container mousemove and mouseleftbuttonup

When you move the mouse over the container, if there is a temporary rule class, set the rule end position. The Code is as follows:

 

Code
Private   Void Container_mousemove ( Object Sender, mouseeventargs E)
{
If (Currenttemporaryrule ! =   Null )
{
Currenttemporaryrule. capturemouse ();
Currenttemporaryrule. endpointposition = E. getposition (currenttemporaryrule );
}
}

When you move the mouse away from a temporary rule, check whether the rule's end position is associated with the activity. If it is not associated with any activity, delete the temporary rule, if any activity is associated with another activity, cancel the temporary definition. The Code is as follows:

 

Code
Private   Void Container_mouseleftbuttonup ( Object Sender, mousebuttoneventargs E)
{
If (Currenttemporaryrule ! =   Null )
{
Currenttemporaryrule. simulaterulepointmouseleftbuttonupevent (rulemovetype. End, currenttemporaryrule, e );
If (Currenttemporaryrule. endactivity =   Null )
{
This . Removerule (currenttemporaryrule );

}
Else
{
Currenttemporaryrule. istemporaryrule =   False ;
}
Currenttemporaryrule. releasemousecapture ();
Currenttemporaryrule =   Null ;

}

}

Through the above work, we have implemented the part mentioned at the beginning of this article.

 

5.10 Set the rule endpoint to the edge of the activity

This setting can be used to describe.

 

You can use either of the following two methods to set the short-term rule on the edge of the activity.

LOne is to find the intersection of rules and activities (Point), As shown in the red circle section.

LThe other is the fixed point of the activity where the rule appears, as shown in the Blue Cross Section.

 

In the first case, no good method has been found to locate this intersection point.

In the second case, it is better to handle it.

 

You can set the rule endpoint location as long as you process the relative positions of the centers of the two activities, as shown in

When the rule is a curve,ProgramFurther judgment is needed. Further improvement will be made in the next chapter.

The content of this chapter ends here. The next chapter will be modified based on the comments of netizens. Thank you for your attention :)