Task 2: Host the Workflow Designer

This topic applies to Windows Workflow Foundation 4 (WF4).

This topic describes the procedure for hosting an instance of the Windows Workflow Designer in a Windows Presentation Foundation (WPF) application.

The procedure configures the Grid control that contains the designer, programmatically creates an instance of the WorkflowDesigner that contains a default Sequence activity, registers the designer metadata to provide designer support for all built-in activities, and hosts the Workflow Designer in the WPF application.

To host the workflow designer

1. Open the HostingApplication project you created in Task 1: Create a New Windows Presentation Foundation Application.

2. Adjust the size of the window to make it easier to use the Workflow Designer. To do this, select MainWindow in the designer, press F4 to display the Properties window, and, in the Layout section there, set the Width to a value of 600 and the Height to a value of 350.

3. Set the grid name by selecting the Grid panel in the designer (click the box inside the MainWindow) and setting the Name property at the top of the Properties window to “grid1”.

4. In the Properties window, click the ellipsis (…) next to the ColumnDefinitions property to open the Collection Editor dialog box.

5. In the Collection Editor dialog box, click the Add button three times to insert three columns into the layout. 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.

6. Set the Width property of the middle column to the value “4*”.

7. Click OK to save the changes. The following XAML is added to your MainWindow.xaml file:

   <Grid Name="grid1">
       <Grid.ColumnDefinitions>
           <ColumnDefinition />
           <ColumnDefinition Width="4*" />
           <ColumnDefinition />
       </Grid.ColumnDefinitions>
   </Grid>
   

8. In Solution Explorer, right-click MainWindow.xaml and select View Code. Modify the code by following these steps:

   1. Add the following namespaces:

      using System.Activities;
      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;
      

   2. To declare a private member field to hold an instance of the WorkflowDesigner, add the following code to the MainWindow class.

      public partial class MainWindow : Window
      {
          private WorkflowDesigner wd;
      
          public MainWindow()
          {
              InitializeComponent();
          }
      }
      

   3. Add the following AddDesigner method to the MainWindow class. The implementation creates an instance of the WorkflowDesigner, adds a Sequence activity to it, and places it in middle column of the grid1 Grid.

      private void AddDesigner()
      {
          //Create an instance of WorkflowDesigner class.
          this.wd = new WorkflowDesigner();
      
          //Place the designer canvas 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 designer canvas to the grid.
          grid1.Children.Add(this.wd.View);
      }
      

   4. Register the designer metadata to add designer support for all the built-in activities. This enables you to drop activities from the toolbox onto the original Sequence activity in the Workflow Designer. To do this, add the RegisterMetadata method to the MainWindow class.

      private void RegisterMetadata()
      {             
          DesignerMetadata dm = new DesignerMetadata();
          dm.Register();
      }
      

      For more information about registering activity designers, see How to: Create a Custom Activity Designer.

   5. In the MainWindow class constructor, add calls to the methods declared previously to register the metadata for designer support and to create the WorkflowDesigner.

      public MainWindow()
      {
          InitializeComponent();
      
          // Register the metadata
          RegisterMetadata();
      
      
          // Add the WFF Designer
          AddDesigner();
      }
      

      Note:
      The RegisterMetadata method registers the designer metadata of built-in activities including the Sequence activity. Because the AddDesigner method uses the Sequence activity, the RegisterMetadata method must be called first.

9. Press F5 to build and run the solution.

10. See Task 3: Create the Toolbox and PropertyGrid Panes to learn how to add Toolbox and PropertyGrid support to your rehosted workflow designer.

See Also

Tasks

Task 1: Create a New Windows Presentation Foundation Application
Task 3: Create the Toolbox and PropertyGrid Panes

Other Resources

Rehosting the Workflow Designer