속성 그리드 확장성

아티클
06/08/2023

디자이너 내에서 지정된 활동을 선택할 때 표시되는 속성 표를 사용자 지정하여 풍부한 편집 환경을 만들 수 있습니다. PropertyGridExtensibility 샘플에서는 이 작업을 수행하는 방법을 보여 줍니다.

시연

Workflow Designer 속성 표 확장성

토론(Discussion)

개발자는 속성 표 편집기의 인라인 모양을 사용자 지정하거나 고급 편집 화면용으로 표시되는 대화 상자를 제공하여 속성 표를 확장할 수 있습니다. 이 샘플에 나오는 편집기는 인라인 편집기와 대화 상자 편집기, 이렇게 두 가지가 있습니다.

인라인 편집기

인라인 편집기 샘플에서는 다음 방법을 보여 줍니다.

PropertyValueEditor에서 파생되는 형식을 만듭니다.
생성자에서 InlineEditorTemplate 값은 WPF(Windows Presentation Foundation) 데이터 템플릿을 사용하여 설정됩니다. 이 값은 XAML 템플릿에 바인딩할 수 있지만 이 샘플에서는 코드를 사용하여 데이터 바인딩을 초기화합니다.

데이터 템플릿에는 속성 표에서 렌더링된 항목의 PropertyValue에 대한 데이터 컨텍스트가 있습니다. CustomInlineEditor.cs에 있는 다음 코드에서는 이 컨텍스트가 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);

활동과 디자이너는 같은 어셈블리에 있기 때문에 활동 디자이너 특성은 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());
}

대화 상자 편집기

대화 상자 편집기 샘플에서는 다음 방법을 보여 줍니다.

DialogPropertyValueEditor에서 파생되는 형식을 만듭니다.
WPF 데이터 템플릿을 사용하여 생성자에서 InlineEditorTemplate 값을 설정합니다. 이 값을 XAML로 만들 수 있지만 이 샘플에서는 코드로 만듭니다.

데이터 템플릿에는 속성 표에서 렌더링된 항목의 PropertyValue에 대한 데이터 컨텍스트가 있습니다. 다음 코드에서는 이 컨텍스트가 Value 속성에 바인딩됩니다. FilePickerEditor.cs에 대화 상자를 발생시키는 단추를 제공하도록 EditModeSwitchButton를 포함하는 것도 중요합니다.

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;

대화 상자 표시를 처리하도록 디자이너 형식의 ShowDialog 메서드를 재정의합니다. 이 샘플에서는 기본 FileDialog가 표시됩니다.

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

샘플을 설치, 빌드 및 실행하려면

솔루션을 빌드한 다음 Workflow1.xaml을 엽니다.
도구 상자에서 SimpleCodeActivity를 디자이너 캔버스로 끌어 옵니다.
SimpleCodeActivity를 클릭한 다음, 슬라이더 컨트롤과 파일 선택 컨트롤이 있는 속성 표를 엽니다.

다음을 통해 공유

속성 그리드 확장성

시연

토론(Discussion)

인라인 편집기

대화 상자 편집기

샘플을 설치, 빌드 및 실행하려면

추가 리소스