Hosting the Workflow Designer

We will configure the WPF Grid that will contain the Workflow Designer. Then, We will create the WorkflowDesigner instance programmatically, and add a Sequence activity with designer support to it. As a consequence, you will be able to host the Workflow Designer in the WPF application.

1. In last post open the MainWindow.xaml file in design mode. To do this, double-click the MainWindow.xaml file.
   

   

   Viewing MainWindow.xaml in the designer

2. Adjust the size of the window. To do this, select MainWindow.xaml in the designer, press F4 to display the Properties window and in the Layout section set the Width to a value of 800 and the Height to a value of 600.

   

   Setting the window’s size

3. Set the Grid name. To do this, select the Grid panel in the designer, and set the Name property to grid1.

   

   Setting the Grid’s Name property

4. Set the window layout using the Grid panel. To do this, in the Properties window click the ellipsis next to the ColumnDefinitions property to open the Collection Editor. 
5.  Add three columns to the grid layout, and set their width. In the Collection Editor, use the Add button to insert three columns in the layout. Set the Width property of the middle column to the value 4*. Click OK to add the columns and close the editor saving the changes.
6. The resulting XAML code is shown below.
7. XAML
   <Grid Name="grid1">

       <Grid.ColumnDefinitions>

           <ColumnDefinition />

           <ColumnDefinition Width="4*" />

           <ColumnDefinition />

       </Grid.ColumnDefinitions>

   </Grid>
8. Note: The first column will contain the Toolbox, the second column will host the Workflow Designer, and the third column will be used for the Property Inspector.
9. Write code to host the Workflow Designer programmatically. To do this, in Solution Explorer right-click the MainWindow.xaml file and choose View Code. Modify the code by following these steps:
   
   a.       Add  the following namespace directives:
   C#
   using System.Activities.Core.Presentation;

   using System.Activities.Presentation;

   using System.Activities.Presentation.Toolbox;

   using System.Activities.Statements;
   Visual Basic
   Imports System.Activities.Core.Presentation

   Imports System.Activities.Presentation

   Imports System.Activities.Presentation.Toolbox

   Imports System.Activities.Statements

              b .     (For Visual Basic users only) Add a class constructor invoking the initialization of the window. To do this, add the following Sub New procedure to the MainWindow class.

Visual Basic

Public Sub New()

    InitializeComponent()

End Sub

        c .       Declare a private member field to hold an instance of the WorkflowDesigner. To do this, add the following code (shown in bold) to the Window1 class.

C#

public partial class MainWindow : Window

{

    private WorkflowDesigner wd;

    public MainWindow()

    {

        InitializeComponent();

    }

}

Visual Basic

Class MainWindow

    Private WithEvents wd As WorkflowDesigner

    Public Sub New()

        InitializeComponent()

    End Sub

End Class

           d .    Create an instance of the WorkflowDesigner, add a Sequence activity to it, and place it in middle column of the WPF grid. To do this, add the following AddDesigner method to MainWindow class.

C#

private void AddDesigner()

{

    //Create an instance of WorkflowDesigner class

    this.wd = new WorkflowDesigner();

    //Place the WorkflowDesigner in the middle column of the grid

    Grid.SetColumn(this.wd.View, 1);

    //Load a new Sequence as default.

    this.wd.Load(new Sequence());

    //Add the WorkflowDesigner to the grid

    grid1.Children.Add(this.wd.View);

}

Visual Basic

Private Sub AddDesigner()

    'Create an instance of WorkflowDesigner class

    Me.wd = New WorkflowDesigner()

    'Place the WorkflowDesigner in the middle column of the grid

    Grid.SetColumn(Me.wd.View, 1)

    'Load a new Sequence as default.

    Me.wd.Load(New Sequence())

    'Add the WorkflowDesigner to the grid

    grid1.Children.Add(Me.wd.View)

End Sub

           e .     Add designer support to the Sequence class by calling the register method of the DesignerMetadata class. This will allow you to drop activities inside the Sequence activity. To do this, add the following private method to MainWindow class.

C#

private void RegisterMetadata()

{

    (new DesignerMetadata()).Register();

}

Visual Basic

Private Sub RegisterMetadata()

    Dim dm as New DesignerMetadata()

    dm.Register()

End Sub

         f.         In the MainWindow class constructor, add calls (shown in bold) to the methods declared previously to register the metadata for designer support and create the WorkflowDesigner.

C#

public MainWindow()

{

    InitializeComponent();

    this.RegisterMetadata();

    this.AddDesigner();

}

Visual Basic

Public Sub New()

    InitializeComponent()

    Me.RegisterMetadata()

    Me.AddDesigner()

End Sub

         g .       Press CTRL + S to save the changes.

    7 .    Set the HostingApplication project as the startup project. To do this, right-click the HostingApplication project in Solution Explorer and select Set as StartUp Project.

   8 .     Press CTRL+F5 to build and run the solution and verify that the Workflow Designer is hosted in the application window.