Extensibilidade da grade de propriedades

Artigo
03/05/2024

Você pode personalizar a grade de propriedades exibida quando uma determinada atividade é selecionada no designer, criando uma experiência de edição avançada. O exemplo PropertyGridExtensibility mostra como isso pode ser feito.

Demonstra

Extensibilidade da grade de propriedades do designer de fluxo de trabalho.

Debate

Para estender a grade de propriedades, um desenvolvedor tem opções para personalizar a aparência embutida de um editor de grade de propriedades ou fornecer uma caixa de diálogo que aparece para uma superfície de edição mais avançada. Há dois editores diferentes demonstrados nesta amostra; um editor embutido e um editor de diálogo.

Editor em linha

O exemplo de editor embutido demonstra o seguinte:

Cria um tipo que deriva de PropertyValueEditor.
No construtor, o InlineEditorTemplate valor é definido com um modelo de dados do Windows Presentation Foundation (WPF). Isso pode ser vinculado a um modelo XAML, mas neste exemplo, o código é usado para inicializar a associação de dados.

O modelo de dados tem um contexto de dados do PropertyValue item renderizado na grade de propriedades. Observe no código a seguir (de CustomInlineEditor.cs) que esse contexto se liga à Value propriedade.

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);

Como a atividade e o designer estão no mesmo assembly, o registro dos atributos do designer de atividade é realizado no construtor estático da própria atividade, conforme mostrado no exemplo a seguir do 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 diálogo

O exemplo de editor de diálogo demonstra o seguinte:

Cria um tipo que deriva de DialogPropertyValueEditor.
Define o InlineEditorTemplate valor no construtor com um modelo de dados WPF. Isso pode ser criado em XAML, mas neste exemplo, isso é criado em código.

O modelo de dados tem um contexto de dados do PropertyValue item renderizado na grade de propriedades. No código a seguir, isso então se liga à Value propriedade. É fundamental incluir também um EditModeSwitchButton para fornecer o botão que levanta a caixa de diálogo em 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;

Substitui o ShowDialog método no tipo de designer para manipular a exibição da caixa de diálogo. Neste exemplo, um básico FileDialog é mostrado.

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

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());
}

Para configurar, compilar e executar o exemplo

Crie a solução e abra Workflow1.xaml.
Arraste um SimpleCodeActivity da caixa de ferramentas para a tela do designer.
Clique em SimpleCodeActivity e, em seguida, abra a grade de propriedades onde há um controle deslizante e um controle de seleção de arquivos.

Partilhar via