Extensibilité des grilles de propriétés

Article
06/08/2023

Vous pouvez personnaliser la grille de propriétés affichée quand une activité donnée est sélectionnée dans le concepteur, pour obtenir une expérience d’édition enrichie. L’exemple PropertyGridExtensibility montre comment procéder.

Illustre le

Extensibilité de la grille des propriétés du concepteur de workflow.

Discussion

Pour étendre la grille des propriétés, un développeur dispose d'options permettant de personnaliser l'apparence incluse d'un éditeur de grilles des propriétés ou de fournir une boîte de dialogue qui s'affiche pour offrir une surface d'édition plus avancée. Deux éditeurs différents sont présentés dans cet exemple : un éditeur Inline et un éditeur de boîtes de dialogue.

Éditeur inline

L'exemple d'éditeur inline montre les points suivants :

Il crée un type qui dérive de PropertyValueEditor.
Dans le constructeur, la valeur InlineEditorTemplate est définie avec un modèle de données Windows Presentation Foundation (WPF). Il peut être lié à un modèle XAML, mais dans cet exemple, le code est utilisé pour initialiser la liaison de données.

Le modèle de données a un contexte de données du PropertyValue de l'élément restitué dans la grille des propriétés. Notez, dans le code suivant (provenant de CustomInlineEditor.cs), que ce contexte crée ensuite une liaison avec la propriété 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);

Étant donné que l'activité et le concepteur se trouvent dans le même assembly, l'inscription des attributs du concepteur d'activités s'effectue dans le constructeur statique de l'activité elle-même, comme le montre l'exemple suivant issu 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());
}

Éditeur de boîtes de dialogue

L'exemple d'éditeur de boîtes de dialogue montre les points suivants :

Il crée un type qui dérive de DialogPropertyValueEditor.
Définit la valeur InlineEditorTemplate dans le constructeur avec un modèle de données WPF. Cet élément peut être créé en XAML, mais dans cet exemple, il est créé dans le code.

Le modèle de données a un contexte de données du PropertyValue de l'élément restitué dans la grille des propriétés. Dans le code suivant, ce contexte crée ensuite une liaison avec la propriété Value. Il est essentiel d'inclure également un EditModeSwitchButton pour fournir le bouton qui affiche la boîte de dialogue dans 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;

Substitue la méthode ShowDialog dans le type concepteur pour gérer l'affichage de la boîte de dialogue. Dans cet exemple, un FileDialog de base est présenté.

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

Pour configurer, générer et exécuter l'exemple

Générez la solution, puis ouvrez Workflow1.xaml.
Faites glisser un SimpleCodeActivity de la boîte à outils vers le canevas du concepteur.
Cliquez sur SimpleCodeActivity, puis ouvrez la grille des propriétés où se trouvent un contrôle de curseur et un contrôle de sélection de fichier.

Partager via