Building a graphical process designer with Silverlight (ii)

This article supporting source code

Before you begin, there are a few things to say before you start:

1, I can not use the blog to upload the image function, so many pictures are omitted.

2, the Code on the CodePlex (http://workflowdesigner.codeplex.com/), if you are interested, welcome to join the development.

3. Online Demo: HTTP://219.153.66.61/WF

Third, the design of the class

Before you make a class design, say what Silverlight uses to represent the class described above. In Silverlight, you can use the user control (Silverlight user contro) to describe various classes that have a user interface, such as the active class, the rule class, as described above. The operation is simple, add a new Silverlight user contro to Vs.net 2008. is actually a XAML file. Layout the user interface in a XAML file and write a background method in the corresponding Xam.cs file.

What you need to say is that the dynamic positioning of rules and activities uses relative positions relative to the container in the case of a mouse drag activity or a rule move, that is, using the Canvas.Top and Canvas.Left properties for positioning.

It is also important to note that there are several points to be taken into account in relation to activities and rules.

A rule can be associated with two different activities, one for the start activity (the start endpoint is associated). One for the finalization activity (End Endpoint Association)

The start and end activities of a rule cannot be the same activity.

Any two rules, their starting and ending activities cannot be the same, that is, there can be no duplicate rule associations between the two different activities.

3.1 Design of the active class (activity)

An activity represents an active node in a workflow that is represented as a block diagram on a flowchart, can be dragged, and can be associated with the start or end of a rule.

3.1.1 Xam

The following code represents the appearance of the active class

1<usercontrox:class= "Shareidea.Web.UI.Contro.Workflow.Designer.Activity"
2 xmlns= "Http://schemas.microsoft.com/winfx/2006/xam/presentation"
3 xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xam"
4 mouseleftbuttondown= "Usercontro_mouseleftbuttondown"
5 mouseleftbuttonup= "Usercontro_mouseleftbuttonup"
6 mousemove= "Usercontro_mousemove"
7 mouseenter= "Usercontro_mouseenter"
8 mouseleave= "Usercontro_mouseleave"
9 width= "height=" >
<canvas name= "Container" >
One <rectangle horizontalalignment= "Stretch" verticalalignment= "Stretch" fil= "Green"/>
<border cornerradius= "Ten" background= "Green" opacity= "0.9" width= "a" height= ">"
<textbox name= "Title" text= "New Activity" borderbrush= "green" fontsize= "green" background= "
height= "width=" mouseenter= "Textbox_mouseenter" ></TextBox>
</Border>
</Canvas>
18</usercontro>
19

As you can see from the code above, the active class consists primarily of a rectangular shape and a delete button. The graphic appears as follows: