How to: Create a Custom Activity Designer

Article
09/15/2021

Custom activity designers are typically implemented so that their associated activities are composable with other activities whose designers can be dropped on to the design surface with them. This functionality requires that a custom activity designer provide a "drop zone" where an arbitrary activity can be placed and also the means to manage the resulting collection of elements on the design surface. This topic describes how to create a custom activity designer that contains such a drop zone and how to create a custom activity designer that provides that editing functionality needed to manage the collection of designer elements.

Custom activity designers typically inherit from ActivityDesigner which is the default base activity designer type for any activities without a specific designer. This type provides the design-time experience of interacting with the property grid and configuring basic aspects such as managing colors and icons.

ActivityDesigner uses two helper controls, WorkflowItemPresenter and WorkflowItemsPresenter to make it easier to develop custom activity designers. They handle common functionality like dragging and dropping of child elements, deletion, selection, and addition of those child elements. The WorkflowItemPresenter allows a single child UI element inside, providing the "drop zone", it while the WorkflowItemsPresenter can provide support multiple UI elements, including additional functionality like the ordering, moving, deleting, and adding of child elements.

The other key part of the story that needs highlighting in the implementation of a custom activity designer concerns the way in which the visual edits are bound using WPF data binding to the instance stored in memory of what we are editing in the designer. This is accomplished by the Model Item tree, which is also responsible for enabling change notification and the tracking of events like changes in states.

This topic outlines two procedures.

The first procedure describes how to create a custom activity designer with a WorkflowItemPresenter that provides the drop zone that receives other activities. This procedure is based on the Custom Composite Designers - Workflow Item Presenter sample.
The second procedure describes how to create a custom activity designer with a WorkflowItemsPresenter that provides the functionality needed to edit of a collection of contained elements. This procedure is based on the Custom Composite Designers - Workflow Items Presenter sample.

To create a custom activity designer with a drop zone using WorkflowItemPresenter

Start Visual Studio 2010.
On the File menu, point to New, and then select Project….

The New Project dialog box opens.
In the Installed Templates pane, select Windows from your preferred language category.
In the Templates pane, select WPF Application.
In the Name box, enter UsingWorkflowItemPresenter.
In the Location box, enter the directory in which you want to save your project, or click Browse to navigate to it.
In the Solution box, accept the default value.
Click OK.
Right-click the MainWindows.xaml file in the Solution Explorer, select Delete and confirm OK in the Microsoft Visual Studio dialog box.
Right-click the UsingWorkflowItemPresenter project in Solution Explorer, select Add, then New Item… to bring up the Add New Item dialog and select the WPF category from the Installed Templates section on the left.
Select the Window (WPF) template, name it RehostingWFDesigner, and click Add.

Open the RehostingWFDesigner.xaml file and paste the following code into it to define the UI for the application:

<Window x:Class=" UsingWorkflowItemPresenter.RehostingWFDesigner"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sapt="clr-namespace:System.Activities.Presentation.Toolbox;assembly=System.Activities.Presentation"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Window1" Height="600" Width="900">
    <Window.Resources>
        <sys:String x:Key="AssemblyName">System.Activities, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35</sys:String>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="7*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0">
            <sapt:ToolboxControl Name="Toolbox">
                <sapt:ToolboxCategory CategoryName="Basic">
                    <sapt:ToolboxItemWrapper AssemblyName="{StaticResource AssemblyName}" >
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.Sequence
                        </sapt:ToolboxItemWrapper.ToolName>
                       </sapt:ToolboxItemWrapper>
                    <sapt:ToolboxItemWrapper  AssemblyName="{StaticResource AssemblyName}">
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.WriteLine
                        </sapt:ToolboxItemWrapper.ToolName>

                    </sapt:ToolboxItemWrapper>
                    <sapt:ToolboxItemWrapper  AssemblyName="{StaticResource AssemblyName}">
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.If
                        </sapt:ToolboxItemWrapper.ToolName>

                    </sapt:ToolboxItemWrapper>
                    <sapt:ToolboxItemWrapper  AssemblyName="{StaticResource AssemblyName}">
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.While
                        </sapt:ToolboxItemWrapper.ToolName>

                    </sapt:ToolboxItemWrapper>
                </sapt:ToolboxCategory>
            </sapt:ToolboxControl>
        </Border>
        <Border Grid.Column="1" Name="DesignerBorder"/>
        <Border Grid.Column="2" Name="PropertyBorder"/>
    </Grid>
</Window>

To associate an activity designer with an activity type, you must register that activity designer with the metadata store. To do this, add the RegisterMetadata method to the RehostingWFDesigner class. Within the scope of the RegisterMetadata method, create an AttributeTableBuilder object and call the AddCustomAttributes method to add the attributes to it. Call the AddAttributeTable method to add the AttributeTable to the metadata store. The following code contains the rehosting logic for the designer. It registers the metadata, puts the SimpleNativeActivity into the toolbox, and creates the workflow. Put this code into the RehostingWFDesigner.xaml.cs file.

using System;
using System.Activities.Core.Presentation;
using System.Activities.Presentation;
using System.Activities.Presentation.Metadata;
using System.Activities.Presentation.Toolbox;
using System.Activities.Statements;
using System.ComponentModel;
using System.Windows;

namespace UsingWorkflowItemPresenter
{
    // Interaction logic for RehostingWFDesigner.xaml
    public partial class RehostingWFDesigner
    {
        public RehostingWFDesigner()
        {
            InitializeComponent();
        }

        protected override void OnInitialized(EventArgs e)
        {
            base.OnInitialized(e);
            // Register metadata.
            (new DesignerMetadata()).Register();
            RegisterCustomMetadata();
            // Add custom activity to toolbox.
            Toolbox.Categories.Add(new ToolboxCategory("Custom activities"));
            Toolbox.Categories[1].Add(new ToolboxItemWrapper(typeof(SimpleNativeActivity)));

            // Create the workflow designer.
            var wd = new WorkflowDesigner();
            wd.Load(new Sequence());
            DesignerBorder.Child = wd.View;
            PropertyBorder.Child = wd.PropertyInspectorView;

        }

        void RegisterCustomMetadata()
        {
            var builder = new AttributeTableBuilder();
            builder.AddCustomAttributes(typeof(SimpleNativeActivity), new DesignerAttribute(typeof(SimpleNativeDesigner)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

Right-click the References directory in Solution Explorer and select Add Reference … to bring up the Add Reference dialog.
Click the .NET tab, locate the assembly named System.Activities.Core.Presentation, select it and click OK.
Using the same procedure, add references to the following assemblies:
1. System.Data.DataSetExtensions.dll
2. System.Activities.Presentation.dll
3. System.ServiceModel.Activities.dll
Open the App.xaml file and change the value of the StartUpUri to "RehostingWFDesigner.xaml".
Right-click the UsingWorkflowItemPresenter project in Solution Explorer, select Add, then New Item… to bring up the Add New Item dialog and select the Workflow category form the Installed Templates section on the left.
Select the Activity Designer template, name it SimpleNativeDesigner, and click Add.

Open the SimpleNativeDesigner.xaml file and paste the following code into it. Note this code uses ActivityDesigner as your root element and shows how binding is used to integrate WorkflowItemPresenter into your designer so a child type can be displayed in your composite activity designer.

Note

The schema for ActivityDesigner allows the addition of only one child element to your custom activity designer definition; however, this element could be a StackPanel, Grid, or some other composite UI element.

<sap:ActivityDesigner x:Class=" UsingWorkflowItemPresenter.SimpleNativeDesigner"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
    xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation">
    <sap:ActivityDesigner.Resources>
        <DataTemplate x:Key="Collapsed">
            <StackPanel>
                <TextBlock>This is the collapsed view</TextBlock>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="Expanded">
            <StackPanel>
                <TextBlock>Custom Text</TextBlock>
                <sap:WorkflowItemPresenter Item="{Binding Path=ModelItem.Body, Mode=TwoWay}"
                                        HintText="Please drop an activity here" />
            </StackPanel>
        </DataTemplate>
        <Style x:Key="ExpandOrCollapsedStyle" TargetType="{x:Type ContentPresenter}">
            <Setter Property="ContentTemplate" Value="{DynamicResource Collapsed}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                    <Setter Property="ContentTemplate" Value="{DynamicResource Expanded}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </sap:ActivityDesigner.Resources>
    <Grid>
        <ContentPresenter Style="{DynamicResource ExpandOrCollapsedStyle}" Content="{Binding}" />
    </Grid>
</sap:ActivityDesigner>

Right-click the UsingWorkflowItemPresenter project in Solution Explorer, select Add, then New Item… to bring up the Add New Item dialog and select the Workflow category form the Installed Templates section on the left.
Select the Code Activity template, name it SimpleNativeActivity, and click Add.

Implement the SimpleNativeActivity class by entering the following code into the SimpleNativeActivity.cs file:

using System.Activities;

namespace UsingWorkflowItemPresenter
{
    public sealed class SimpleNativeActivity : NativeActivity
    {
        // this property contains an activity that will be scheduled in the execute method
        // the WorkflowItemPresenter in the designer is bound to this to enable editing
        // of the value
        public Activity Body { get; set; }

        protected override void CacheMetadata(NativeActivityMetadata metadata)
        {
           metadata.AddChild(Body);
           base.CacheMetadata(metadata);

        }

        protected override void Execute(NativeActivityContext context)
        {
            context.ScheduleActivity(Body);
        }
    }
}

Select Build Solution from the Build menu.
Select Start Without Debugging from the Debug menu to open the rehosted custom design window.

To create a custom activity designer using WorkflowItemsPresenter

The procedure for the second custom activity designer is the parallels the first with a few modifications, the first of which is to name the second application UsingWorkflowItemsPresenter. Also this application does not define a new custom activity.

Key differences are contained in the CustomParallelDesigner.xaml and RehostingWFDesigner.xaml.cs files. Here is the code from the CustomParallelDesigner.xaml file that defines the UI:

<sap:ActivityDesigner x:Class=" UsingWorkflowItemsPresenter.CustomParallelDesigner"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
    xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation">
    <sap:ActivityDesigner.Resources>
        <DataTemplate x:Key="Collapsed">
            <TextBlock>This is the Collapsed View</TextBlock>
        </DataTemplate>
        <DataTemplate x:Key="Expanded">
            <StackPanel>
                <TextBlock HorizontalAlignment="Center">This is the</TextBlock>
                <TextBlock HorizontalAlignment="Center">extended view</TextBlock>
                <sap:WorkflowItemsPresenter HintText="Drop Activities Here"
                                    Items="{Binding Path=ModelItem.Branches}">
                    <sap:WorkflowItemsPresenter.SpacerTemplate>
                        <DataTemplate>
                            <Ellipse Width="10" Height="10" Fill="Black"/>
                        </DataTemplate>
                    </sap:WorkflowItemsPresenter.SpacerTemplate>
                    <sap:WorkflowItemsPresenter.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </sap:WorkflowItemsPresenter.ItemsPanel>
                </sap:WorkflowItemsPresenter>
            </StackPanel>
        </DataTemplate>
        <Style x:Key="ExpandOrCollapsedStyle" TargetType="{x:Type ContentPresenter}">
            <Setter Property="ContentTemplate" Value="{DynamicResource Collapsed}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                    <Setter Property="ContentTemplate" Value="{DynamicResource Expanded}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </sap:ActivityDesigner.Resources>
    <Grid>
        <ContentPresenter Style="{DynamicResource ExpandOrCollapsedStyle}" Content="{Binding}"/>
    </Grid>
</sap:ActivityDesigner>

Here is the code from the RehostingWFDesigner.xaml.cs file that provides the rehosting logic:

using System;
using System.Activities.Core.Presentation;
using System.Activities.Presentation;
using System.Activities.Presentation.Metadata;
using System.Activities.Statements;
using System.ComponentModel;
using System.Windows;

namespaceUsingWorkflowItemsPresenter
{
    public partial class RehostingWfDesigner : Window
    {
        public RehostingWfDesigner()
        {
            InitializeComponent();
        }

        protected override void OnInitialized(EventArgs e)
        {
            base.OnInitialized(e);
            // Register metadata.
            (new DesignerMetadata()).Register();
            RegisterCustomMetadata();

            // Create the workflow designer.
            var wd = new WorkflowDesigner();
            wd.Load(new Sequence());
            DesignerBorder.Child = wd.View;
            PropertyBorder.Child = wd.PropertyInspectorView;

        }

        void RegisterCustomMetadata()
        {
            var builder = new AttributeTableBuilder();
            builder.AddCustomAttributes(typeof(Parallel), new DesignerAttribute(typeof(CustomParallelDesigner)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

How to: Create a Custom Activity Designer

To create a custom activity designer with a drop zone using WorkflowItemPresenter

To create a custom activity designer using WorkflowItemsPresenter

See also

Feedback

Additional resources