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

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

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

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

К общим приложениям для декораторов относятся:

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

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

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

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

В следующем примере показан класс, реализующий простой адаптер. Пример украшателя просто украшает уголки UIElement кругами.

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

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

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

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

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

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

Адорнеры получают входные события так же, как и любые другие 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))

Украшение детей панели

Чтобы привязать украшение к дочерним элементам Panel, выполните следующие действия:

1. Вызовите метод staticGetAdornerLayer, чтобы найти слой украшения для элемента, дочерние элементы которого нужно украсить.

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

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

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

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

См. также

• AdornerHitTestResult
• Фигуры и основные рисунки: Обзор в WPF
• Использование изображений, рисунков и визуальных элементов в живописи
• Обзор Объектов Рисования
• Темы руководства