How to Write a Designer Component for Custom Workflow Activity

God breathing through me

How to Write a Designer Component for Custom Workflow Activity

Published on February 12, 2007

So far I've discussed about these topics about writing a 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.

7 Comments

DotNetKicks.com
Feb 12, 2007 11:04 PM
#

You've been kicked (a good thing) - Trackback from DotNetKicks.com

mura
Dec 06, 2007 2:20 AM
#

how t o download this project?

ali
Jan 09, 2008 4:17 AM
#

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?

Michael Freidgeim
May 23, 2008 5:04 PM
#

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?

TimothyP
Sep 03, 2008 9:52 AM
#

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?

Exploring Workflow Foundation Part x: Custom Designers - The ActivityDesigner class « Hungry for Knowledge
Oct 18, 2008 5:34 AM
#

Pingback from Exploring Workflow Foundation Part x: Custom Designers - The ActivityDesigner class « Hungry for Knowledge

Z
Jan 11, 2010 3:45 PM
#

Please Help Me .
Does WorkFlow have a DataBase Itself? if it Have How Can I Use it ?
Please Answer Me Quickly.(I Need It)

Keyvan Nayyeri

Recent Posts

Archive

How to Write a Designer Component for Custom Workflow Activity

Leave a Comment