Пошаговое руководство. Реализация встроенного редактора значений

Статья
11/05/2008

Обновлен: Ноябрь 2007

Модель расширяемости среды для Windows Presentation Foundation (WPF) для Visual Studio (конструктор) позволяет создавать редакторы настраиваемых значений для свойств в окне «Свойства» во время разработки. Редакторы могут быть либо встроенными — позволяющими изменять значения непосредственно в окне «Свойства», либо расширенными. Последние позволяют предоставлять дополнительные пользовательские интерфейсы для редактирования свойств вне окна «Свойства». Чтобы продемонстрировать создание встроенного редактора, в данном примере представлено пошаговое описание создания встроенного редактора значений для свойства «Background» элемента управления.

В данном пошаговом руководстве выполняются следующие задачи.

Создание проекта пользовательского элемента управления WPF.
Создание встроенного редактора, который может использоваться для редактирования значения свойства в окне «Свойства».
Создание производного класса PropertyValueEditor, который используется для подключения встроенного редактора к классу, для которого необходимо предоставить пользовательские возможности редактирования.
Создание производного класса IRegisterMetadata для регистрации созданного встроенного редактора.
Тестирование встроенного редактора значений во время разработки.

Обязательные компоненты

Ниже перечислены компоненты, необходимые для выполнения этого пошагового руководства.

Visual Studio 2008.

Создание пользовательского элемента управления

Первым этапом является создание проекта для пользовательского элемента управления. Этот элемент управления представляет собой простую кнопку, созданную с помощью небольшого количества кода, в котором для реализации поведения во время разработки используется метод GetIsInDesignMode.

Создание пользовательского элемента управления

Создайте новый проект библиотеки пользовательских элементов управления WPF на языке Visual C# с именем CustomControlLibrary.

Код для элемента управления CustomControl1 откроется в редакторе кода.
Добавьте ссылку на следующую сборку WPF (конструктор):
- Microsoft.Windows.Design.

В редакторе кода для элемента управления CustomControl1 замените код в пространстве имен CustomControlLibrary следующим кодом:

public class CustomControl1 : Button
{
    public CustomControl1()
    {
        if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
        {
            Background = Brushes.Red;
        }
    }
}

Задайте в качестве выходного пути проекта папку «bin\».
Выполните построение решения.

Создание шаблона для встроенного редактора

Встроенный редактор может быть создан с помощью шаблона данных XAML. Это будет простой раскрывающийся список, содержащий варианты цветов для свойства Background.

Создание шаблона для встроенного редактора

Добавьте к решению новый проект библиотеки пользовательских элементов управления WPF на языке Visual C# с именем CustomControlLibrary.Design.

Код для элемента управления CustomControl1 откроется в редакторе кода.
В обозревателе решений удалите файл «CustomControl1» из проекта «CustomControlLibrary.Design».
Добавьте ссылку на следующую сборку WPF (конструктор):
- Microsoft.Windows.Design.
Добавьте ссылку на проект «CustomControlLibrary».
Задайте в качестве выходного пути папку «..\CustomControlLibrary\bin\». В этом случае сборка элемента управления и сборка метаданных будут находиться в одной папке, что обеспечит доступ к метаданным для конструкторов.
Добавьте новый класс с именем EditorResources к проекту «CustomControlLibrary.Design».

В редакторе кода для класса EditorResources замените автоматически создаваемый код на следующий код.

namespace InlineEditorNamespace
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Windows;
    public partial class EditorResources : ResourceDictionary {
        public EditorResources()
            : base()
        {
            InitializeComponent();
        }
    }
}

В меню Проект выберите пункт Добавление словаря ресурсов.
Присвойте файлу имя «EditorResources.xaml» и нажмите кнопку Добавить.

В представлении XAML для класса «EditorResources» замените автоматически созданный код XAML на следующий код XAML.

<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:PropertyEditing="clr-namespace:Microsoft.Windows.Design.PropertyEditing;assembly=Microsoft.Windows.Design"
    xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:Class="InlineEditorNamespace.EditorResources">
    <DataTemplate x:Key="BrushInlineEditorTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <ComboBox Grid.Column="0" Text="{Binding StringValue}">
                <ComboBoxItem>Red</ComboBoxItem>
                <ComboBoxItem>Blue</ComboBoxItem>
                <ComboBoxItem>Green</ComboBoxItem>
            </ComboBox>
        </Grid>
    </DataTemplate>
</ResourceDictionary>

Выполните построение решения.

Инкапсуляция шаблона и регистрация встроенного редактора

Теперь, создав шаблон для встроенного редактора, необходимо создать класс, производный от класса PropertyValueEditor, чтобы использовать шаблон в качестве пользовательского редактора, а затем зарегистрировать новый встроенный редактор.

Инкапсуляция и регистрация встроенного редактора

Добавьте новый класс с именем BrushInlineEditor к проекту «CustomControlLibrary.Design».

В редакторе кода для класса BrushInlineEditor замените автоматически создаваемый код на следующий код.

namespace InlineEditorNamespace
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using Microsoft.Windows.Design.PropertyEditing;
    using System.Windows;
    using InlineEditorNamespace;

    public class BrushInlineEditor : PropertyValueEditor
    {
        private EditorResources res = new EditorResources();

        public BrushInlineEditor()
        {
            this.InlineEditorTemplate = res["BrushInlineEditorTemplate"] as DataTemplate;
        }
    }
}

Добавьте новый класс с именем Metadata к проекту «CustomControlLibrary.Design».

В редакторе кода для класса Metadata замените автоматически создаваемый код на следующий код.

namespace InlineEditorNamespace
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using Microsoft.Windows.Design.Metadata;
    using System.ComponentModel;
    using Microsoft.Windows.Design.PropertyEditing;
    using System.Windows.Media;
    using System.Windows.Controls;
    using System.Windows;
    using CustomControlLibrary;

    // Container for any general design-time metadata that we want to initialize.
    // Designers will look for a type in the design-time assembly that implements IRegisterMetadata.
    // If found, they will instantiate it and call its Register() method automatically.
    internal class Metadata : IRegisterMetadata
    {

        // Called by Cider to register any design-time metadata
        public void Register()
        {
            AttributeTableBuilder builder = new AttributeTableBuilder();
            builder.AddCustomAttributes
                (typeof(CustomControl1), 
                Control.BackgroundProperty,
                PropertyValueEditor.CreateEditorAttribute(
                    typeof(BrushInlineEditor)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

Выполните построение решения.

Тестирование встроенного редактора значений

Теперь встроенный редактор значений готов к использованию. Остается только протестировать его. Чтобы протестировать встроенный редактор, добавьте приложение WPF к проекту, добавьте пользовательский элемент управления в приложение WPF и просмотрите встроенный редактор в действии.

Тестирование встроенного редактора значений

Добавьте к решению новый проект приложения WPF на языке Visual C# с именем DemoApplication.

В конструкторе WPF (конструктор) откроется файл Window1.xaml.
Добавьте ссылку на проект «CustomControlLibrary».
В представлении XAML для файла Window1.xaml замените автоматически создаваемый код на представленный ниже код XAML. В этом коде XAML добавляется ссылка на пространство имен CustomControlLibrary и пользовательский элемент управления CustomControl1. Красный фон кнопки, отображаемой в представлении конструктора, указывает, что элемент управления находится в режиме разработки. Если кнопка не отображается, щелкните панель информации в верхней части конструктора для перезагрузки представления.
```
<Window x:Class="DemoApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary">
    <Grid>
        <my:CustomControl1 Margin="30,30,30,30" Name="customControl11">Button</my:CustomControl1>
    </Grid>
</Window>
```
В представлении конструктора выберите элемент управления.
В окне Свойства нажмите кнопку раскрывающегося списка свойства Background. Вместо списка по умолчанию отображается небольшой список цветов, представляющий новый встроенный редактор. Можно выбрать следующие варианты: красный, синий и зеленый.
Выберите цвет из раскрывающегося списка. Фон пользовательского элемента управления изменится на этот цвет.

Следующие действия

Описание более сложного редактора свойств см. в разделе Пошаговое руководство. Реализация редактора цвета, в котором приведены способы создания расширенного редактора.