Compartir vía

Tarea 2: Hospedar el diseñador de flujo de trabajo

  • Artículo

En este tema, se describe el procedimiento para hospedar una instancia del Diseñador de flujo de trabajo de Windows en una aplicación de Windows Presentation Foundation (WPF).

El procedimiento configura el control de cuadrícula que contiene el diseñador, crea mediante programación una instancia de WorkflowDesigner que contiene una actividad Sequence predeterminada, registra los metadatos del diseñador para proporcionar compatibilidad con el diseñador en todas las actividades integradas y hospeda el Diseñador de flujo de trabajo en la aplicación de WPF.

Para hospedar el diseñador de flujo de trabajo

  1. Abra el proyecto HostingApplication que creó en Tarea 1: Crear una aplicación de Windows Presentation Foundation.

  2. Ajuste el tamaño de la ventana para facilitar el uso del Diseñador de flujo de trabajo. Para ello, seleccione MainWindow en el diseñador, presione F4 para mostrar la ventana Propiedades y, en la sección Diseño, defina Ancho en 600 y Alto en 350.

  3. Establezca el nombre de la cuadrícula seleccionando el panel Cuadrícula en el diseñador (haga clic en el cuadro dentro de MainWindow) y estableciendo la propiedad Name en la parte superior de la ventana Propiedades en "grid1".

  4. En la ventana Propiedades, haga clic en los puntos suspensivos (…) junto a la propiedad ColumnDefinitions para abrir el cuadro de diálogo Editor de la colección.

  5. En el cuadro de diálogo Editor de la colección, haga clic en el botón Agregar tres veces para insertar tres columnas en el diseño. La primera columna contendrá el cuadro de herramientas, la segunda hospedará el Diseñador de flujo de trabajo y la tercera se usará para el inspector de propiedad.

  6. Establezca la propiedad Width de la columna central en el valor "4*".

  7. Haga clic en Aceptar para guardar los cambios. El siguiente XAML se agrega a su archivo MainWindow.xaml:

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

  8. En el Explorador de soluciones, haga clic con el botón derecho en MainWindow.xaml y seleccione Ver código. Modifique el código siguiendo estos pasos:

    1. Agregue los siguientes espacios de nombres:

      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. Para declarar un campo de miembro privado que hospede una instancia de WorkflowDesigner, agregue el código siguiente a la clase MainWindow:

      public partial class MainWindow : Window
{
    private WorkflowDesigner wd;

    public MainWindow()
    {
        InitializeComponent();
    }
}

    3. Agregue el siguiente método AddDesigner a la clase MainWindow. La implementación crea una instancia de WorkflowDesigner, le agrega una actividad Sequence y la coloca en la columna central de la cuadrícula grid1.

      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. Registre los metadatos del diseñador para agregar la compatibilidad con el diseñador para todas las actividades integradas. Esto le permite colocar las actividades del cuadro de herramientas en la actividad Sequence original en el Diseñador de flujo de trabajo. Para ello, agregue el método RegisterMetadata a la clase MainWindow:

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

      Para más información sobre cómo registrar diseñadores de actividad, consulte Cómo crear un diseñador de actividad personalizado.

    5. En el constructor de clases MainWindow, agregue llamadas a los métodos declarados previamente para registrar los metadatos a fin de ser compatibles con el diseñador y crear WorkflowDesigner.

      public MainWindow()
{
    InitializeComponent();

    // Register the metadata.
    RegisterMetadata();

    // Add the WFF Designer.
    AddDesigner();
}

      Nota

      El método RegisterMetadata registra los metadatos del diseñador de actividades integradas incluida la actividad Sequence. Puesto que el método AddDesigner usa la actividad Sequence, es necesario llamar primero al método RegisterMetadata.

  9. Presione F5 para compilar y ejecutar la solución.

  10. Consulte Tarea 3: Crear los paneles de Cuadro de herramientas y PropertyGrid para aprender a agregar compatibilidad con Cuadro de herramientas y PropertyGrid al diseñador de flujo de trabajo rehospedado.

Consulte también