Build a workflow designer using Silverlight (12) (with source code download, Online Demo, and video tutorial)

Source codeDownload: http://www.shareidea.net/opensource.htm

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

Video tutorial: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

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)

Build a workflow designer using Silverlight (12)

This chapter includes the following content:

 

LThe new activity chart makes the chart clearer and more beautiful.

LAdded support for up and down keys (after selecting an activity or rule, move it with the direction key. Press ctrl to increase the distance of each move ).However, there is a problem where the arrow keys cannot be captured, but the mouse releasing event can be captured.

LImplement the skin change method described in Chapter 10. 

 

There is no value for the above two updates in this chapter. The following describes how to change the skin in chapter 10,

If you do not know how the skin changes, see Chapter 10.

8. Skin replacement

Let's test the activity. XAML class by taking the following steps: 

1.First, we will copy the class variables in activity. G. CS (under the OBJ "debug" designer folder) and the activity. XAML. CS file copied by the initializecomponent method. TheseCodeAs follows:

 

Code
Internal System. Windows. Controls. canvas container;
Internal System. Windows. Controls. tooltip ttactivitytip;
Internal System. Windows. shapes. ellipse eicenterellipse;
Internal Using idea. Web. UI. Control. workflow. Designer. activitypicturecontainer sdpicture;
Private   Bool _ Contentloaded;
[System. Diagnostics. debuggernonusercodeattribute ()]
Public   Void Initializecomponent ()
{
If (_ Contentloaded)
{
Return ;
}
_ Contentloaded =   True ;
System. Windows. application. loadcomponent ( This , New System. Uri ( " /Component designer; component/DESIGNER/activity. XAML " , System. urikind. Relative ));
This . Container = (System. Windows. Controls. Canvas )( This . Findname ( " Container " )));
This . Ttactivitytip = (System. Windows. Controls. tooltip )( This . Findname ( " Ttactivitytip " )));
This . Eicenterellipse = (System. Windows. shapes. ellipse )( This . Findname ( " Eicenterellipse " )));
This . Sdpicture = (Idea. Web. UI. Control. workflow. Designer. activitypicturecontainer )( This . Findname ( " Sdpicture " )));
}

 

2.Then compile the Code. At this time, an error occurs, indicating that the same variables and methods already exist. This is because the same code exists in the activity. XAML. CS and activity. G. CS files. We deleted all activity. G. CS content, compiled it again, OK, and passed.

3.Although the compilation is successful, the initializecomponent Code cannot set the breakpoint because the attribute is set.

[System. Diagnostics. debuggernonusercodeattribute ()]

This attribute is used to indicateThe ID does not belong to the application.ProgramThe type or member of the user code,This property tells vs.net that the debugging mechanism will not enter this piece of code.Let's take thisComment out the attribute and run it again.

4.Next, create a new activity skin file. Through the vs.net browser, we copy the activity. XAML file and name it activity2.xaml.

5.Then compile the code and an error occurs. Because the automatically generated activity2.g. CS file contains some code, we clear activity2.g. CS and then compile it. OK.

6.Modify the activity2.xaml style to distinguish it from activity. XAML.

7.ModifySystem. Windows. application. loadcomponent (this, new system. Uri ("/component designer; component/DESIGNER/activity. XAML", system. urikind. Relative ))To load the new skin activity2.xaml file.

 

Finally, run the code. You can see that the new activity2.xaml file is used. 

In this way, we can dynamically load the specified skin by changing the second parameter of system. Windows. application. loadcomponent. 

So far, we have completed a variable skin code. However, there are some points that can be considered in depth.

 

1,If you have a lot of skins, you do not want to download all skin files when loading for the first time. This will increase the user waiting time. If you can dynamically download Xmal code from the network,However, this method has not been found..

2,The above method does not make. xmal and XAML. if the CS file is lost, you can manually cut the XAML. CS file to other files, and put the skin file (. xmal files) are placed in separate folders for ease of management.

3,Can the automatically generated. G. CS file be removed? This file is automatically generated during compilation and is located in the OBJ "debug" designer folder.