Extensibilidad de la cuadrícula de propiedades

Puede personalizar la cuadrícula de propiedades que se muestra cuando se selecciona una actividad determinada en el diseñador, creando una experiencia de edición enriquecida. El ejemplo PropertyGridExtensibility muestra cómo se puede hacer.

Muestra

Extensibilidad de la cuadrícula de propiedad del diseñador de flujo de trabajo.

Debate

Para ampliar la cuadrícula de propiedad, un desarrollador dispone de opciones para personalizar el aspecto alineado de un editor de cuadrícula de propiedad o para proporcionar un cuadro de diálogo que aparece para una superficie de edición más avanzada. En este ejemplo se muestran dos editores diferentes; un editor alineado y un editor de cuadro de diálogo.

Editor alineado

En el ejemplo del editor alineado se muestra lo siguiente:

• Crea un tipo que deriva de PropertyValueEditor.

• En el constructor, el valor InlineEditorTemplate se establece con una plantilla de datos de Windows Presentation Foundation (WPF). Se puede enlazar a una plantilla XAML, pero en este ejemplo, se utiliza código para inicializar el enlace de datos.

• La plantilla de datos tiene un contexto de datos de PropertyValue del elemento presentado en la cuadrícula de propiedad. Observe en el siguiente código (de CustomInlineEditor.cs) que este contexto enlaza a la propiedad Value.

  FrameworkElementFactory stack = new FrameworkElementFactory(typeof(StackPanel));
  FrameworkElementFactory slider = new FrameworkElementFactory(typeof(Slider));
  Binding sliderBinding = new Binding("Value");
  sliderBinding.Mode = BindingMode.TwoWay;
  slider.SetValue(Slider.MinimumProperty, 0.0);
  slider.SetValue(Slider.MaximumProperty, 100.0);
  slider.SetValue(Slider.ValueProperty, sliderBinding);
  stack.AppendChild(slider);
  

• Dado que la actividad y el diseñador se encuentran en el mismo ensamblado, el registro de los atributos del diseñador de actividad se realiza en el constructor estático de la propia actividad, tal como se muestra en el siguiente ejemplo de SimpleCodeActivity.cs.

  static SimpleCodeActivity()
  {
      AttributeTableBuilder builder = new AttributeTableBuilder();
      builder.AddCustomAttributes(typeof(SimpleCodeActivity), "RepeatCount", new EditorAttribute(typeof(CustomInlineEditor), typeof(PropertyValueEditor)));
      builder.AddCustomAttributes(typeof(SimpleCodeActivity), "FileName", new EditorAttribute(typeof(FilePickerEditor), typeof(DialogPropertyValueEditor)));
      MetadataStore.AddAttributeTable(builder.CreateTable());
  }
  

Editor de cuadros de diálogo

En el ejemplo del editor de cuadros de diálogo se muestra lo siguiente:

1. Crea un tipo que deriva de DialogPropertyValueEditor.

2. Establece el valorInlineEditorTemplate en el constructor con una plantilla de datos de WPF. Se puede crear en XAML, pero en este ejemplo se crea en código.

3. La plantilla de datos tiene un contexto de datos de PropertyValue del elemento presentado en la cuadrícula de propiedad. En el siguiente código, a continuación se enlaza a la propiedad Value. Es importante incluir también una clase EditModeSwitchButton para proporcionar el botón que muestra el cuadro de diálogo en FilePickerEditor.cs.

   this.InlineEditorTemplate = new DataTemplate();
   
   FrameworkElementFactory stack = new FrameworkElementFactory(typeof(StackPanel));
   stack.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
   FrameworkElementFactory label = new FrameworkElementFactory(typeof(Label));
   Binding labelBinding = new Binding("Value");
   label.SetValue(Label.ContentProperty, labelBinding);
   label.SetValue(Label.MaxWidthProperty, 90.0);
   
   stack.AppendChild(label);
   
   FrameworkElementFactory editModeSwitch = new FrameworkElementFactory(typeof(EditModeSwitchButton));
   
   editModeSwitch.SetValue(EditModeSwitchButton.TargetEditModeProperty, PropertyContainerEditMode.Dialog);
   
   stack.AppendChild(editModeSwitch);
   
   this.InlineEditorTemplate.VisualTree = stack;
   

4. Invalida el método ShowDialog en el tipo de diseñador para administrar la presentación del cuadro de diálogo. En este ejemplo, se muestra un objeto FileDialog básico.

   public override void ShowDialog(PropertyValue propertyValue, IInputElement commandSource)
   {
       Microsoft.Win32.OpenFileDialog ofd = new Microsoft.Win32.OpenFileDialog();
       if (ofd.ShowDialog() == true)
       {
           propertyValue.Value = ofd.FileName;
       }
   }
   

5. Dado que la actividad y el diseñador se encuentran en el mismo ensamblado, el registro de los atributos del diseñador de actividad se realiza en el constructor estático de la propia actividad, tal como se muestra en el siguiente ejemplo de SimpleCodeActivity.cs.

   static SimpleCodeActivity()
   {
       AttributeTableBuilder builder = new AttributeTableBuilder();
       builder.AddCustomAttributes(typeof(SimpleCodeActivity), "RepeatCount", new EditorAttribute(typeof(CustomInlineEditor), typeof(PropertyValueEditor)));
       builder.AddCustomAttributes(typeof(SimpleCodeActivity), "FileName", new EditorAttribute(typeof(FilePickerEditor), typeof(DialogPropertyValueEditor)));
       MetadataStore.AddAttributeTable(builder.CreateTable());
   }
   

Configurar, compilar y ejecutar el ejemplo

1. Compile la solución y, a continuación, abra Workflow1.xaml.

2. Arrastre SimpleCodeActivity del cuadro de herramientas al lienzo del diseñador.

3. Haga clic en SimpleCodeActivity y, a continuación, abra la cuadrícula de propiedades donde hay un control deslizante y un control de selección de archivo.