Building a Composite Activity Designer part(2 - 4)

We will learn how to create a composite activity designer. We will use the metadata stored to override the designer of an activity from the workflow activity library. Also, We will add a text box in the hosted workflow designer to display the XAML source code while creating a workflow.

Default designer vs. Composite designer

Part 2  Creating a Custom Activity and its Designer

1. Open Microsoft Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
2. Open the project from last post Building a Composite Activity Designer part(1 - 4) .
3. Create a new custom activity. To do this, right-click the CustomActivities project and select Add | New Item. In the Add New Item dialog box select the Code category and then select the Class template. Set the name to PrePostSequence.cs (C#) or PrePostSequence.vb (Visual Basic) and click Add.

   

   Adding a custom activity (C#)

   

   Adding a custom activity (Visual Basic)
4. Add the following namespace directive at the top of the PrePostSequence.cs (C#) or PrePostSequence.vb (Visual Basic) file:
   
   C#
   using System;

   using System.Activities;

   using System.Collections.Generic;
   Visual Basic
   Imports System.Collections.Generic
5. Implement the PrePostSequence custom activity. To do this, replace the empty class definition with the following code:
   
   C#
   public class PrePostSequence : CodeActivity

   {

       public Activity Pre { get; set; }

       public Activity Post { get; set; }

       public List<Activity> Activities { get; set; }

   
   

       public PrePostSequence()

       {

           Activities = new List<Activity>();

       }

   
   

       protected override void Execute(CodeActivityContext context)

       {

           throw new NotImplementedException();

       }

   }
   Visual Basic
   Public Class PrePostSequence

       Inherits CodeActivity

   
   

       Public Property Pre() As Activity

       Public Property Post() As Activity

       Public Property Activities() As List(Of Activity)

   
   

       Public Sub New()

           Activities = New List(Of Activity)()

       End Sub

   
   

       Protected Overrides Sub Execute(ByVal context As CodeActivityContext)

           Throw New NotImplementedException()

       End Sub
   End Clas
6. Create an activity designer for the PrePostSequence activity. To do this, right-click the CustomActivities project and select Add New Item. In the Add New Item dialog box select the Workflow category and then the Activity Designer template. Set the name to PrePostSequenceDesigner.xaml and click Add. The Activity designer will open automatically.
7. Create the designer for the PrePostSequence custom activity. To do this, open the PrePostSequence in the XAML editor, and add the following code (shown in bold) removing the tags.
   
   XAML
   <sap:ActivityDesigner ...>

       <StackPanel>

           <Border BorderBrush="Green" BorderThickness="4" CornerRadius="5">

               <sap:WorkflowItemPresenter Item="{Binding Path=ModelItem.Pre, Mode=TwoWay}" HintText="Insert Pre Activities Here"/>

           </Border>

           <Border BorderBrush="Red" BorderThickness="4" CornerRadius="5">

               <StackPanel>

                   <Border BorderBrush="Black" BorderThickness="2" CornerRadius="5">

                       <TextBlock HorizontalAlignment="Center">Activities</TextBlock>

                   </Border>

                   <sap:WorkflowItemsPresenter Items="{Binding Path=ModelItem.Activities}" HintText="Insert Activities Here">

                       <sap:WorkflowItemsPresenter.SpacerTemplate>

                           <DataTemplate>

                               <Ellipse Fill="Red" Width="30" Height="30" />

                           </DataTemplate>

                       </sap:WorkflowItemsPresenter.SpacerTemplate>

                       <sap:WorkflowItemsPresenter.ItemsPanel>

                           <ItemsPanelTemplate>

                               <StackPanel Orientation="Horizontal"/>

                           </ItemsPanelTemplate>

                       </sap:WorkflowItemsPresenter.ItemsPanel>

                   </sap:WorkflowItemsPresenter>

               </StackPanel>

           </Border>

           <Border BorderBrush="Black" BorderThickness="4" CornerRadius="5">

               <sap:WorkflowItemPresenter Item="{Binding Path=ModelItem.Post, Mode=TwoWay}" HintText="Insert Post Activities Here"/>

           </Border>

       </StackPanel>

   </sap:ActivityDesigner>
   The activity designer should look similar to the following figure:

   

   Creating the activity designer
8. Warning 
   If an error is displayed on the XML editor window, fix it by building the solution (press CTRL+SHIFT+B).