Extensibilidade da grade de propriedades

Artigo
06/08/2023

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

Demonstra

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

Discussão

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

Editor embutido

O exemplo editor embutido demonstra o seguinte:

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

O modelo de dados tem um contexto de dados de PropertyValue de item processado na grade de propriedade. Observe o seguinte código (de CustomInlineEditor.cs) que este contexto associando a propriedade de 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);

Porque a atividade e o designer estão no mesmo assembly, o registro dos atributos do designer de atividade é feito no construtor estático de atividade próprio, conforme mostrado no exemplo 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 caixa de diálogo

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

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

O modelo de dados tem um contexto de dados de PropertyValue de item processado na grade de propriedade. No código a seguir, ou associação à propriedade de Value . É importante incluir também EditModeSwitchButton para fornecer o botão que aumenta 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 método de ShowDialog no tipo de designer para manipular a exibição da caixa de diálogo. Nesse exemplo, FileDialog básico é 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 SimpleCodeActivity da caixa de ferramentas para a tela de designer.
Clique SimpleCodeActivity e abra a grade propriedade onde há um controle deslizante e um controle de cortar do arquivo.

Compartilhar via