Designer Rehosting

Designer rehosting is a common scenario that refers to hosting the workflow design canvas inside of a custom application. The hosting application most people are familiar with is Visual Studio, however there are a number of scenarios where showing the workflow designer in an application may be useful:

• Monitoring applications (allowing an end user to visualize the process, as well as runtime data about the process such as the currently active state, aggregate execution time data, or other information about an instance of the workflow).

• Applications that allow a user to customize the process with a limited set of activities.

To support these types of applications, the workflow designer ships inside the .NET Framework, and can be hosted inside a WPF application, or in a WinForms application with the appropriate WPF hosting code. The DesignerRehosting sample demonstrates:

• Rehosting the WF designer.

• Using the rehosted toolbox and property grid as well.

Rehosting the designer

This sample shows how to create the WPF layout to contain the designer, seen in the following grid layout (Toolbox code omitted for space concerns). Note the naming of the borders which contain the designer and property grid.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="7*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0">
        <sapt:ToolboxControl>...</sapt:ToolboxControl>
    </Border>
    <Border Grid.Column="1" Name="DesignerBorder"/>
    <Border Grid.Column="2" Name="PropertyBorder"/>
</Grid>

Next the sample creates the designer, and associates its primary View and PropertyInspectorView with the appropriate container in the user interface. There are a few additional lines of code in the following example that merit some explanation. The Register call is required to associate the default activity designers for the activities shipped with .NET Framework. Load is called to pass in the WF item to be edited. Finally, the View (primary canvas) and PropertyInspectorView (property grid) are placed onto the user interface surface.

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

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

Using the rehosted toolbox

This sample uses the rehosted toolbox control declaratively in XAML. Note that in code, one can pass a type to the ToolboxItemWrapper constructor.

<!-- Copyright (c) Microsoft Corporation. All rights reserved-->
<Window x:Class="Microsoft.Samples.DesignerRehosting.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>
                <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>

Using the sample

1. Open the DesignerRehosting.sln solution in Visual Studio.

2. Press F5 to compile and run the application.

3. A WPF application starts with a rehosted designer.