How to Write a Designer Component for Custom Workflow Activity
So far I've discussed about these topics about writing a custom workflow activity:
- How to Write a Custom Workflow Activity
- How to Write a Validator for Custom Workflow Activity
- How to Write a Toolbox Item Component for Custom Workflow Activity
As I stated in first part there is only one component remained: Designer. In this post I finish this series by discussing about designer component. Designer component is where you can change the visual presentation of an activity. By default Visual Studio applies a pre-defined designer to custom activities that you saw in previous posts but using designer component you can change this designer.
Designer component can be split into two component itself: ActivityDesigner and ActivityDesignerTheme. First component is the main component for designer and second one is used to change the theme of activity (background and foreground colors and ...).
These are steps to create a designer for a custom workflow:
- Create a Designer component for custom workflow by inheriting from ActivityDesigner base class.
- Add a Designer attribute to custom workflow class.
To write a designer theme you must follow these steps:
- Create a designer theme by inheriting from ActivityDesignerTheme base class.
- Add an ActivityDesignerTheme attribute to activity designer class.
I prefer to step directly into code and update my sample to show above steps in action.
First I create a new class and name it CustomActivityDesigner and inherit this class from ActivityDesigner.
using System;
using System.Collections.Generic;
using System.Text;
using System.Workflow.ComponentModel.Design;
namespace CustomActivitySample
{
internal sealed class CustomActivityDesigner : ActivityDesigner
{
}
}
Now I create another class for my designer theme and name it CustomActivityDesignerTheme and inherit it from ActivityDesignerTheme.
using System;
using System.Collections.Generic;
using System.Text;
using System.Workflow.ComponentModel.Design;
using System.Drawing;
namespace CustomActivitySample
{
internal sealed class CustomActivityDesignerTheme : ActivityDesignerTheme
{
}
}
After this I create and inherit a constructor for this class and set start and end background colors for my activity theme. Note that here it's possible to set some other properties for activity theme. Final code for my designer theme class looks like this:
using System;
using System.Collections.Generic;
using System.Text;
using System.Workflow.ComponentModel.Design;
using System.Drawing;
namespace CustomActivitySample
{
internal sealed class CustomActivityDesignerTheme : ActivityDesignerTheme
{
public CustomActivityDesignerTheme(WorkflowTheme theme)
: base(theme)
{
this.BackColorStart = Color.LightCoral;
this.BackColorEnd = Color.LightGreen;
}
}
}
At this point I can go back to my designer class and add an ActivityDesignerTheme attribute to use this designer theme.
using System;
using System.Collections.Generic;
using System.Text;
using System.Workflow.ComponentModel.Design;
namespace CustomActivitySample
{
[ActivityDesignerTheme(typeof(CustomActivityDesignerTheme))]
internal sealed class CustomActivityDesigner : ActivityDesigner
{
}
}
Now I can simply implement my logic for main designer component by overriding necessary methods from base class. There are some methods to override but it depends on you (as developer) to choose these methods and customize your designer. A full list of these methods with their description is available on MSDN. For my sample I want to change the activity text and change the position of text rectangle by overriding Initialize() method and TextRectangle property.
using System;
using System.Collections.Generic;
using System.Text;
using System.Workflow.ComponentModel.Design;
using System.Drawing;
namespace CustomActivitySample
{
[ActivityDesignerTheme(typeof(CustomActivityDesignerTheme))]
internal sealed class CustomActivityDesigner : ActivityDesigner
{
protected override void Initialize
(System.Workflow.ComponentModel.Activity activity)
{
base.Initialize(activity);
this.Text = "KeyvanNayyeri";
}
protected override Rectangle TextRectangle
{
get
{
return new Rectangle(this.Bounds.Right - 55,
this.Bounds.Top - 5, 50, 50);
}
}
}
}
So as you see in image below, my activity has a new designer.
Full source code for the sample custom workflow activity that I used in my posts is attached to this post and you can download it.
[advertisement] Axosoft OnTime 2008 is four developer tools in one: bug tracking, project wiki, feature management, and help desk. It manages your development process so developers can focus on coding. Installed or Hosted – Free Single-user license -- Free 30-day team trial.
6 Comments : 02.12.07
Feedbacks
Thanks for helpful post.
System.Workflow.ComponentModel.Design.ActivityDesigner' is not an attribute class. What do You mean by attribute?
And How could we download the code?
If I created a workflow with a few activities (While,If etc) and want to convert it to custom composite activity with ability to insert new activities inside blocks, how can I do it?
Analogy in ASP.NET is strightforward- just a few steps(see How to: Convert Web Forms Pages into ASP.NET User Controls msdn.microsoft.com/.../2x6sx01c.aspx ) .
Is something similar available for WW?
Hey,
I tried both your sample and the sample in the Professional WWF book by Wrox. It compiles and I have a rehosted WWF designer, I can drag activities to it, and my own activities which don't have a custom designer, but when I drag one with a custom designer it dissapears as I let go of the mouse on the design surface....
Any ideas?
#6
Exploring Workflow Foundation Part x: Custom Designers - The ActivityDesigner class « Hungry for Knowledge
10.18.2008 @ 5:34 AM
Pingback from Exploring Workflow Foundation Part x: Custom Designers - The ActivityDesigner class « Hungry for Knowledge
#1
DotNetKicks.com
02.12.2007 @ 11:04 PM