WPF FAQ - Adorners

1. Call the static method ‘GetAdornerLayer()’, to get the AdornerLayer associated with the UIElement.

2. Call the ‘Add()’ method to bind the Adorner to the target UIElement.

[C#]

        AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(myTextBox);
        adornerLayer.Remove(new ControlAdorner(myTextBox));

To bind an adorner to a particular UI element, the following things needs to be done.

• Call the static method ‘GetAdornerLayer()’, to get the AdornerLayer associated with the UIElement.

• Call the ‘Add()’ method to bind the Adorner to the target UIElement.

[C#]

        AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(myTextBox);
        adornerLayer.Add(new ControlAdorner(myTextBox));

The common way of implementing the rendering of visual element is to override the ‘OnRenderSizeChanged’ method and use one or more ‘DrawingContext’ objects to render the adorner’s visuals as needed.

Given below is a simple code snippet for adding rounded corners around the adorned element.

[C#]

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

• Adding functional handles to a UIElement that enables a user to manipulate the element in some way (resize, rotate, reposition etc.).

• Provide visual feedback to indicate various states or in response to various events.

• Overlay visual decorations on a UIElement.

• Visually mask or override part or all of UIElement.

Adorners are a special type of FrameworkElement used to provide visual cues. It can be used to add functional handle to elements or provide state information about the control. There is a class that plays an important role in rendering called ‘AdornerDecorator’. This class determines the placement of the ‘AdornerLayer’ in the visual tree.