I’ve recently been creating custom designer for Workflow Activities and hosting the whole WF designer in a web application. As there is very limited documentation and guide other than Microsoft Forums, here I’ll try to shed some lights to some of the problems I have encountered.

WF 4.0 designer is a set of WPF controls and classes designed with re-hosting in mind, so hosting the designer in an XBAP application works to some extent without any pain. To start create a WPF (either browser or desktop) application that will be used as your WF Designer. There are a couple of controls you can add to your main window that make it look like out of the box designer:

Toolbox Control: Is the toolbox control that contains your activities. You can create Categories and place your own and system activities into separate categories.

Workflow Designer: Is the control that does all the heavy lifting like hosting the activities, generating xaml, loading and saving, etc.

Property Editor: Workflow designer has a UIElement that is the property editor you can use to edit properties of the workflow/activity.

Workflow Designer

Let’s say you have a Send activity that sends out an email to selected recipients. You need to create a custom designer for the activity. The good thing is you don’t need to anything to the source code of the activity, thanks to IRegisterMetadata interface, you can add attributes to your activities from the outside. For those familiar with WPF Design Time integrations, this is the same thing. To add necessary designer attribute to your Activity, you should do something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class SendToRegisterer : IRegisterMetadata
{
    [SecurityCritical]
    public void Register()
    {
        var builder = new AttributeTableBuilder();

        builder.AddCustomAttributes(typeof(SendTo), new DesignerAttribute(typeof(SendToDesigner)));
        builder.AddCustomAttributes(typeof(SendTo), "Receiver", new BrowsableAttribute(false));
        builder.AddCustomAttributes(typeof(SendTo), "Subject", new BrowsableAttribute(false));
            
        MetadataStore.AddAttributeTable(builder.CreateTable());
    }
}

There are two things happening here: First we set the designer of SendTo activity to SendToDesigner then we set BrowsableAttribute with False value to the properties of SendTo. This makes the properties hidden on the property editor so you can make sure user can only interact with your activity through the designer.

To create the designer class you need to create a WPF UserControl and make it derive from ActivityDesigner in http://schemas.microsoft.com/netfx/2009/xaml/activities/presentation namespace. Among many things, this base class has a ModelItem property that allows interacting with the activity that is being displayed. You can bind activity properties to your designer directly using this property or alternatively bind the designer UI to your ViewModel and update the ModelItem property when you want to replicate the changes to the Model Item and update / generate WF Xaml.

On the next post, we’ll see how to bind designer UI to our activity properties.