Поделиться через

Общие сведения о декоративных элементах

  • Статья

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

Декораторы являются специальным типом FrameworkElement, использующимся для предоставления пользователю визуальных подсказок. Среди других применений, декораторы могут быть использованы для добавления функциональных обработчиков в элементы или для предоставления сведений о состоянии об элементе управления.

В этом разделе содержатся следующие подразделы.

  • О Декораторах
  • Реализация пользовательского декоративного элемента
  • Поведение визуализации декоративных элементов
  • События и проверки попадания
  • Декорирование одного элемента пользовательского интерфейса
  • Декорирование дочерних объектов Panel
  • Связанные разделы

О Декораторах

Adorner является пользовательским FrameworkElement, который привязан к UIElement. Декораторы отображаются в AdornerLayer, который является отображаемой поверхностью на самом верху графического элемента или коллекции графических элементов. Отрисовка декоратора не зависит от отрисовки UIElement, с которым связан декоратор. Декоратор обычно располагается относительно элемента, к которому он привязан, при помощи стандартных двухмерных координат, отсчитываемых от левого верхнего угла декоративного элемента.

Обычные приложения для декораторов включают:

  • Добавление функциональных обработчиков в UIElement, которые позволяют пользователю в некотором роде манипулировать элементом (изменять размеры, вращать, перемещать и т.д.).

  • Предоставление визуальной обратной связи для показа различных состояний или в ответ на различные события.

  • Наложение визуальных декораторов на UIElement.

  • Визуально маскировать или переопределять часть или весь UIElement.

Windows Presentation Foundation (WPF) предоставляет базовую оболочку для декоративных визуальных элементов. В таблице ниже перечислены основные типы, используемые при декорировании объектов, и их назначение. Несколько примеров использования.

Adorner

Абстрактный базовый класс, из которого наследуются все конкретные реализации декораторов.

AdornerLayer

Класс, представляющий уровень отрисовки для декораторов одного или нескольких графических элементов.

AdornerDecorator

Класс, который позволяет графическому уровню ассоциироваться с коллекцией элементов.

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

Оболочка декораторов, предоставляемая Windows Presentation Foundation (WPF), предназначена главным образом для поддержки создания пользовательских декораторов. Пользовательский декоратор создается путем реализации класса, который наследуется от абстрактного класса Adorner.

ms743737.alert_note(ru-ru,VS.90).gifПримечание.

Родителем Adorner является AdornerLayer, который отображает Adorner, не являющийся графическим элементом.

Следующий пример показывает класс, реализующий простой декоратор. В примере декоратор просто украшает углы UIElement кругами.

Public Class SimpleCircleAdorner
    Inherits Adorner
    Sub New(ByVal adornedElement As UIElement)
        MyBase.New(adornedElement)
    End Sub

    Protected Overrides Sub OnRender(ByVal drawingContext As System.Windows.Media.DrawingContext)
        MyBase.OnRender(drawingContext)
        Dim adornedElementRect As New Rect(AdornedElement.DesiredSize)
        Dim renderBrush As New SolidColorBrush(Colors.Green)
        renderBrush.Opacity = 0.2
        Dim renderPen As New Pen(New SolidColorBrush(Colors.Navy), 1.5)
        Dim renderRadius As Double
        renderRadius = 5.0

        'Draw a circle at each corner.
        drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopLeft, renderRadius, renderRadius)
        drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopRight, renderRadius, renderRadius)
        drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomLeft, renderRadius, renderRadius)
        drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomRight, renderRadius, renderRadius)
    End Sub
End Class

// Adorners must subclass the abstract base class Adorner.
public class SimpleCircleAdorner : Adorner
{
  // Be sure to call the base class constructor.
  public SimpleCircleAdorner(UIElement adornedElement)
    : base(adornedElement) 
  { 
  }

  // A common way to implement an adorner's rendering behavior is to override the OnRender
  // method, which is called by the layout system as part of a rendering pass.
  protected override void OnRender(DrawingContext drawingContext)
  {
    Rect adornedElementRect = new Rect(this.AdornedElement.DesiredSize);

    // Some arbitrary drawing implements.
    SolidColorBrush renderBrush = new SolidColorBrush(Colors.Green);
    renderBrush.Opacity = 0.2;
    Pen renderPen = new Pen(new SolidColorBrush(Colors.Navy), 1.5);
    double renderRadius = 5.0;

    // Draw a circle at each corner.
    drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopLeft, renderRadius, renderRadius);
    drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopRight, renderRadius, renderRadius);
    drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomLeft, renderRadius, renderRadius);
    drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomRight, renderRadius, renderRadius);
  }
}

На следующем рисунке показан SimpleCircleAdorner примененный к TextBox.

Пример Adorners: украшенное текстовое поле

Поведение визуализации декоративных элементов

Важно обратить внимание, что декораторы не включают любое обязательное поведение визуализации; гарантируется, что ответственность за отображение декоратора лежит на реализаторе декоратора. Распространенным способом реализации поведения визуализации является переопределение метода OnRenderSizeChanged и использование одного или более объектов DrawingContext для отрисовки графических компонентов декоратора по мере необходимости (как показано в приведенном выше примере).

ms743737.alert_note(ru-ru,VS.90).gifПримечание.

Все, что помещается в уровень декоратора отображается поверх любых других установленных вами стилей. Другими словами, декораторы визуально всегда наверху и не могут быть переопределены по оси z.

События и проверки попадания

Декораторы получают события ввода так же, как и любой другой FrameworkElement. Поскольку декоратор всегда выше по оси z, чем украшаемый им элемент, декоратор получает события ввода, такие как Drop или MouseMove, которые могут быть предназначены для лежащего ниже графического элемента. Декоратор может ожидать определенные события ввода и передавать их на лежащий ниже графический элемент путем повторного вызова события.

Чтобы включить передачу проверки попадания элементов под декоратором, установите свойство проверки попадания IsHitTestVisible в false на декораторе. Дополнительные сведения о проверке попадания см. в разделе

Проверка попадания на визуальном уровне.

Декорирование одного элемента пользовательского интерфейса

Для привязки графического элемента к конкретному UIElement, выполните следующие действия:

  1. Вызовите статический метод GetAdornerLayer для получения объекта AdornerLayer для декорируемого UIElement. GetAdornerLayer идет вверх по визуальному дереву, начиная с указанного UIElement, и возвращает первый найденный графический уровень. (Если графические уровни не найдены, метод возвращает значение null.)

  2. Вызовите метод Add для привязки декоратора к нужному UIElement.

Следующий пример привязывает SimpleCircleAdorner (показанный выше) к TextBox с именем myTextBox.

myAdornerLayer = AdornerLayer.GetAdornerLayer(myTextBox)
myAdornerLayer.Add(New SimpleCircleAdorner(myTextBox))

myAdornerLayer = AdornerLayer.GetAdornerLayer(myTextBox);
myAdornerLayer.Add(new SimpleCircleAdorner(myTextBox));
ms743737.alert_note(ru-ru,VS.90).gifПримечание.

Использование Язык XAML (Extensible Application Markup Language) для привязки элемента оформления к другому элементу в настоящее время не поддерживается.

Декорирование дочерних объектов Panel

Для привязки элемента оформления к дочерним объектам Panel выполните следующие действия.

 

  1. Вызовите static метод GetAdornerLayer для поиска графического уровня для элемента, чьи дочерние элементы надо оформить.

  2. Выполните перечисление через дочерние элементы родительского элемента и вызовите метод Add для привязки элемента оформления к каждому дочернему элементу.

Следующий пример привязывает SimpleCircleAdorner (показанный выше) к дочерним элементам StackPanel с именем myStackPanel.

For Each toAdorn As UIElement In myStackPanel.Children
    myAdornerLayer.Add(New SimpleCircleAdorner(toAdorn))
Next


foreach (UIElement toAdorn in myStackPanel.Children)
  myAdornerLayer.Add(new SimpleCircleAdorner(toAdorn));

См. также

Основные понятия

Обзор фигур и базовых средств рисования в приложении WPF

Рисование с помощью объектов Image, Drawing и Visual

Обзор объектов Drawing

Ссылки

AdornerHitTestResult

Другие ресурсы

Разделы пошагового руководства, посвященные декорированию

Примеры графических элементов