Пошаговое руководство. Изменение поведения свойства во время разработки

Статья
08/11/2011

При использовании расширяемости среды для настройки Конструктор WPF для Visual Studio часто создаются пользовательские элементы управления. Иногда требуется, чтобы свойство элемента управления вело себя по-разному во время разработки и во время выполнения, несмотря на то что пользователю позволено устанавливать значение свойства обычным образом. Например, требуется, чтобы пользователь имел возможность установить значение false для свойства "Visible", но элемент управления по-прежнему должен быть видимым во время разработки.

В этом примере создаются пользовательские элементы управления Button и изменяется поведение свойств Background и Content. Для этого создается поставщик DesignModeValueProvider, который присоединяется к пользовательскому элементу управления. DesignModeValueProvider фиксирует изменения свойства, которые совершает пользователь; вставляется собственная логика в метод TranslatePropertyValue; DesignModeValueProvider передает в конструктор новые значения.

Важно!

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

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

Создание проекта библиотеки пользовательских элементов управления WPF.
Создание пользовательского поставщика DesignModeValueProvider.
Создание пользовательского элемента управления "кнопка".
Присоединение поставщика DesignModeValueProvider к пользовательскому элементу управления.
Создание тестового приложения.
Тестирование пользовательского элемента управления.

Примечание

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих настроек или выпуска.Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров.Дополнительные сведения см. в разделе Работа с параметрами.

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

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

Visual Studio 2010

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

Создание проекта

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

В редакторе кода откроется код для элемента управления CustomControl1.
Добавьте ссылку на следующую сборку:
- Microsoft.Windows.Design.Extensibility
В обозревателе решений измените имя файла с кодом на CustomButton.cs или CustomButton.vb.

Если появляется окно сообщения, запрашивающее подтверждение переименования всех ссылок в этом проекте, нажмите кнопку Да.
В меню Построение выберите Построить решение.

Создание пользовательского класса "DesignModeValueProvider"

В этой процедуре создается пользовательский поставщик DesignModeValueProvider. В методе TranslatePropertyValue измените свойство Content элемента управления Button таким образом, чтобы содержимое этой кнопки отображалось в конструкторе строчными буквами. Также изменяется свойство Background объекта Button таким образом, чтобы в конструкторе он отображался со стандартным системным цветом. Эти изменения затрагивают только конструктор. Во время выполнения свойства Content и Background отображаются со значениями, заданными пользователем.

Примечание

В этой процедуре создается один объект DesignModeValueProvider, который обрабатывает два различных свойства.Также для обработки различных свойств можно создать несколько объектов DesignModeValueProvider.

Создание пользовательского класса "DesignModeValueProvider"

Добавьте новый класс с именем CustomButtonDesignModeValueProvider.cs или CustomButtonDesignModeValueProvider.vb в проект "CustomButton".

Новый класс открывается в редакторе кода.

Добавьте следующие пространства имен в верхней части файла. Замените существующие пространства, если они присутствуют.


Imports System
Imports System.Windows                  'SystemColors
Imports System.Windows.Media            'SolidColorBrush
Imports System.Windows.Controls         'Button
Imports Microsoft.Windows.Design.Model  'DesignModeValueProvider
Imports Microsoft.Windows.Design.Metadata


using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;
using Microsoft.Windows.Design.Metadata;   //DesignModeValueProvider

Измените класс CustomButtonDesignModeValueProvider, чтобы он был производным от класса DesignModeValueProvider.


Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class


class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

Добавьте в класс конструктор. В конструкторе можно определить свойства, которые требуется фиксировать.


Public Sub New()
    Properties.Add(GetType(Button), "Content")
    Properties.Add(GetType(Button), "Background")
End Sub


public CustomButtonDesignModeValueProvider()
{
    Properties.Add( typeof(Button), "Content");
    Properties.Add(typeof(Button), "Background");
}

Переопределите метод TranslatePropertyValue в классе. Здесь указывается новое поведение свойств во время разработки.


Public Overrides Function TranslatePropertyValue( _
    ByVal item As ModelItem, _
    ByVal identifier As PropertyIdentifier, _
    ByVal value As Object) As Object

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Content" Then

        Return value.ToString().ToUpper()
    End If

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Background" Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(item, identifier, value)
End Function


public override object TranslatePropertyValue(ModelItem item, PropertyIdentifier identifier, object value)
{
    if (identifier.DeclaringType == typeof( Button ) &&
        identifier.Name == "Content" )
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DeclaringType == typeof(Button) &&
        identifier.Name == "Background")
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(item, identifier, value);
}

В меню Построение выберите Построить решение.

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

В этой процедуре создается пользовательский элемент управления. Создается простой пользовательский элемент управления, который является производным от класса Button, но не содержит дополнительные пользовательские функциональные возможности.

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

Откройте класс CustomButton в редакторе кода.
Добавьте следующие пространства имен в верхней части файла. Замените существующие пространства, если они присутствуют.
```
Imports System.Windows.Controls             'Button
Imports Microsoft.Windows.Design.Features   'Feature
```
```
using System.Windows.Controls;              //Button
using Microsoft.Windows.Design.Features;    //Feature
```

Замените существующий класс следующим.


Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class


public class CustomButton : Button
{
    static CustomButton()
    {
    }
}

В меню Построение выберите Построить решение.

Присоединение класса "DesignModeValueProvider" к пользовательскому элементу управления

В этой процедуре класс DesignModeValueProvider присоединяется к пользовательскому элементу управления с помощью атрибута FeatureAttribute.

Примечание

Можно также присоединить класс DesignModeValueProvider к пользовательскому элементу управления, используя предоставление пользовательских метаданных времени разработки.Дополнительные сведения см. в разделе Предоставление метаданных времени разработки.

Присоединение класса "DesignModeValueProvider" к пользовательскому элементу управления

В редакторе кода найдите объявление класса CustomButton. Код должен выглядеть следующим образом:
```
Public Class CustomButton
    Inherits Button
```
```
public class CustomButton : Button
```

Добавьте атрибут "Feature" к объявлению класса и задайте класс DesignModeValueProvider.

<Feature(GetType(CustomButtonDesignModeValueProvider))> _
Public Class CustomButton
    Inherits Button

[Feature(typeof(CustomButtonDesignModeValueProvider))]
public class CustomButton : Button

В меню Построение выберите Построить решение.

Создание тестового приложения

Добавьте к решению новый проект приложения WPF CustomButtonTestApplication.

Файл MainWindow.xaml будет открыт в сред. Конструктор WPF.
В обозревателе решений щелкните правой кнопкой мыши проект и выберите Назначить запускаемым проектом.
В меню Проект нажмите Добавить ссылку и воспользуйтесь вкладкой Проекты для добавления ссылки на проект "CustomButton".
В меню Построение выберите Построить решение.

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

В представлении XAML для файла MainWindow.xaml замените существующий код на следующий:

<Window x:Class="CustomButtonTestApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cb="clr-namespace:CustomButton;assembly=CustomButton"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

В представлении конструктора выберите кнопку. При необходимости щелкните панель информации в верхней части конструктора, чтобы перегрузить представление.
В окне Свойства найдите свойство Background.
Введите Red и нажмите клавишу ВВОД.

Представление XAML появляется новый код Background="Red", но цвет кнопки в представлении конструктора не изменяется.
В окне Свойства найдите свойство Content.
Введите Hello World и нажмите клавишу ВВОД.

В представлении XAML появляется новое содержимое Hello World, но в представлении конструктора кнопка отображает текст HELLO WORLD.
В меню Отладка щелкните Начать отладку.

Запускается приложение и открывается окно. Во время выполнения цвет кнопки становится красным и содержит текст Hello World.
Закройте окно.