Creating a Basic Activity Designer

We will create the basic styled Activity Designer and register it to use it for the Prompt activity.

1. Open Microsoft Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
2. On the File menu, point to New, and click Project.
3. like last post create WPF Project by chose WPF Project from list and name it CustomActivities and Solution name SecondApps.
4. Remove App.xaml and MainWindow.xaml from the project.
5. Add references to System.Activities.Design assemblies in the CustomActivities project. To do this, in Solution Explorer, right-click the CustomActivities project and select Add Reference. In the .NET tab of the dialog box that is displayed select:
   
   ◦       System.Activities.Presentation
   Click OK to add the references.

   

   Adding WorkflowModel.Design references
6. Add an Activity Designer to the CustomActivities project. To do this, right-click the CustomActivities project and point to Add and select New Item. In the Add New Item dialog box select the Workflow category and select the Activity Designer template. Type BasicDesignerWithStyling.xaml in the Name box.

   

   Adding the Activity Designer item to the project (C#)

   

   Adding the Activity Designer item to the project (Visual Basic)
7. Add the code to BasicDesignerWithStyling.xaml to add a XAML drawing inside the Prompt activity. To do this, follow these steps:
   
   a.       Open the file and using the XAML view remove the empty <Grid> element:
   

   

   Section of the XAML code to be replaced

   b.       Paste the following code in the XAML view of the designer:
   XAML
   <sap:ActivityDesigner ... >

   
   

       <Viewbox x:Name="Group" Width="75">

           <Canvas Width="143.047" Height="159.025">

               <Ellipse x:Name="Ellipse" Width="32.3333" Height="28.3334" Canvas.Left="20.9435" Canvas.Top="8.66254" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000"/>

               <Path x:Name="Path" Width="21.3251" Height="32.8953" Canvas.Left="53.6983" Canvas.Top="41.0262" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 57.1983,44.5262L 71.5234,64.9118L 57.1983,70.4215"/>

               <Path x:Name="Line" Width="42.8127" Height="34.5482" Canvas.Left="68.5744" Canvas.Top="55.3513" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 72.0744,86.3994L 107.887,58.8513"/>

               <Path x:Name="Line_0" Width="45.0165" Height="20.2231" Canvas.Left="74.635" Canvas.Top="77.3898" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 78.135,94.1129L 116.152,80.8898"/>

               <Path x:Name="Path_1" Width="45.5675" Height="17.4684" Canvas.Left="74.635" Canvas.Top="102.734" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 78.135,106.234L 110.642,115.05L 116.702,116.702"/>

               <Path x:Name="Path_2" Width="39.5069" Height="30.1405" Canvas.Left="69.6763" Canvas.Top="114.304" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 73.1763,117.804L 95.7658,133.782L 105.683,140.945"/>

               <Path x:Name="Path_3" Width="20.2231" Height="33.4463" Canvas.Left="33.8636" Canvas.Top="88.4091" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 50.5868,91.9091L 37.3636,106.234L 49.4848,118.355"/>

               <Rectangle x:Name="Rectangle" Width="143.047" Height="159.025" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF000000"/>

           </Canvas>

       </Viewbox>

   
   

   </sap:ActivityDesigner>

   

   BasicDesignerWithStyling code after adding the drawing
8. Press CTRL + S to save the changes and close the file. Press CTRL + SHIFT + B to build the solution.
9. Create new code file name it Prompt.cs by right-click the CustomActivities project and point to Add and select New Item. In the Add New Item dialog box select the code from Installed Templates and select the Code File  add this code on it:
   
   C#
   
   

   namespace CustomActivities

   {

       using System;

       using System.Activities;

       using System.Activities.Statements;

   
   

       public class Prompt : CodeActivity
   

       {

           public string Text { get; set; }

           public string Response { get; set; }

   
   

           protected override void Execute(CodeActivityContext context)

           {

               throw new NotImplementedException();

           }

   
   

           public static Activity GetSimpleSequence()

           {

               return new Sequence

               {

                   Activities =

                   {

                       new Prompt(),

                       new Assign()

                   }

               };

           }

       }

   }

   
   

   Visual Basic

   Public Class Prompt

       Inherits CodeActivity

   
   

       Public Property Text() As String

       Public Property Response() As String

   
   

       Protected Overrides Sub Execute(ByVal context As CodeActivityContext)

           Throw New NotImplementedException()

       End Sub

   
   

       Public Shared Function GetSimpleSequence() As Activity

           Dim sequence As New Sequence()

           sequence.Activities.Add(New Prompt())

           sequence.Activities.Add(New Assign())

           Return sequence

       End Function

   End Class

   
   
10. Create a new WPF Project in SecondApps solution by right-click Add new Project name it HostingApplication .
11. Now you need to make the HostingApplication aware of the new custom designer. To do this, start by right-clicking MainWindow.xaml in Solution Explorer, select View Code and add the following namespace directive:
    
    C#
    using CustomActivities;
    using System.ComponentModel;

    using System.Activities.Presentation.Metadata;
    Visual Basic
    Imports CustomActivities
    Imports System.ComponentModel

    Imports System.Activities.Presentation.Metadata
12. Write code to associate the BasicDesignerWithStyling activity designer to the Prompt activity. Add the following lines in the RegisterMetadata method, which should look like this:
    
    private void RegisterMetadata()

    {

        (new DesignerMetadata()).Register();

    
    

        AttributeTableBuilder builder = new AttributeTableBuilder();

    
    

        // Register Custom Designers.

        builder.AddCustomAttributes(typeof(Prompt), new DesignerAttribute(typeof(BasicDesignerWithStyling)));

    
    

        // Apply the metadata

        MetadataStore.AddAttributeTable(builder.CreateTable());

    }
    Visual Basic
    Private Sub RegisterMetadata()

        Dim dm As New DesignerMetadata()

        dm.Register()

    
    

        Dim builder As New AttributeTableBuilder()

    
    

        ' Register Custom Designers.

        builder.AddCustomAttributes(GetType(Prompt), New DesignerAttribute(GetType(BasicDesignerWithStyling)))

    
    

        ' Apply the metadata

        MetadataStore.AddAttributeTable(builder.CreateTable())

    End Sub
13.  Press CTRL+S to save the changes and close the file.
14.  Set the HostingApplication project as startup project. To do this, right-click HostingApplication project in Solution Explorer and select Set as StartUp Project.
15. Press CTRL+F5 to run the application.
16. With the application running, drag and drop a Prompt activity to the Sequence. The window should look similar to the following figure.

    

    Adding the customized Prompt activity to the designer