WPF中的Adorner基础用法详解与实例
Adorner（装饰器）是WPF中一个强大的功能，它允许开发者在现有UI元素之上叠加额外的视觉效果或交互功能，而不会影响原有布局系统。本文将详细介绍Adorner的基础概念、核心用法以及实际应用示例。
一、Adorner基本概念
1. 什么是Adorner
Adorner是WPF中一种特殊类型的FrameworkElement，用于向用户提供可视化提示。它位于AdornerLayer中，这是一个始终位于装饰元素或装饰元素集合上方的呈现图面。Adorner具有以下特点：
- 独立于被装饰元素的布局系统，不会影响原有UI布局
- 始终显示在被装饰元素之上，无法通过z-order改变其层级
- 可以接收输入事件，但也可以通过设置IsHitTestVisible属性将事件传递给下层元素
2. Adorner的常见应用场景
Adorner在WPF中有多种用途，包括但不限于：
- 向UI元素添加功能控点（如调整大小、旋转、重新定位的把手）
- 提供视觉反馈以指示各种状态（如焦点状态、错误提示）
- 在UI元素上叠加视觉效果（如微信消息的数字角标）
- 从视觉上遮盖或重写UIElement的一部分或全部
- 实现类似Popup的浮动工具栏效果
二、Adorner核心用法
1. 创建自定义Adorner
要创建自定义Adorner，需要继承Adorner类并重写相关方法。最常见的是重写OnRender方法，使用DrawingContext绘制视觉效果。
public class SimpleAdorner : Adorner
{
public SimpleAdorner(UIElement adornedElement) : base(adornedElement) { }
protected override void OnRender(DrawingContext drawingContext)
{
Rect adornedElementRect = new Rect(this.AdornedElement.RenderSize);
// 绘制红色边框
Pen renderPen = new Pen(new SolidColorBrush(Colors.Red), 1.0);
drawingContext.DrawRectangle(null, renderPen, adornedElementRect);
base.OnRender(drawingContext);
}
}
2. 将Adorner添加到元素
添加Adorner的标准流程：
- 获取目标元素的AdornerLayer
- 创建自定义Adorner实例
- 将Adorner添加到AdornerLayer中
// 获取目标元素的AdornerLayer
AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(targetElement);
// 创建并添加Adorner
if(adornerLayer != null)
{
adornerLayer.Add(new SimpleAdorner(targetElement));
}
3. 使用VisualCollection创建复杂Adorner
对于需要包含多个可视化子元素的复杂Adorner，可以使用VisualCollection：
public class ComplexAdorner : Adorner
{
private VisualCollection _visuals;
private Canvas _canvas;
public ComplexAdorner(UIElement adornedElement) : base(adornedElement)
{
_visuals = new VisualCollection(this);
_canvas = new Canvas();
// 添加子元素到Canvas
Rectangle rect = new Rectangle { Fill = Brushes.Red, Width = 10, Height = 10 };
_canvas.Children.Add(rect);
_visuals.Add(_canvas);
}
protected override int VisualChildrenCount => _visuals.Count;
protected override Visual GetVisualChild(int index) => _visuals[index];
protected override Size ArrangeOverride(Size finalSize)
{
_canvas.Arrange(new Rect(finalSize));
return finalSize;
}
}
三、Adorner实用示例
1. 基础装饰效果
示例：为按钮添加文字装饰
public class TextAdorner : Adorner
{
public TextAdorner(UIElement adornedElement) : base(adornedElement) { }
protected override void OnRender(DrawingContext drawingContext)
{
FormattedText text = new FormattedText(
"New!!",
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface("Arial"),
12,
Brushes.Red);
drawingContext.DrawText(text, new Point(AdornedElement.RenderSize.Width - 20, 0));
}
}
// 使用方式
AdornerLayer layer = AdornerLayer.GetAdornerLayer(myButton);
layer.Add(new TextAdorner(myButton));
2. 交互式Adorner
示例：创建可调整大小的Adorner
public class ResizeAdorner : Adorner
{
private VisualCollection _visuals;
private Rectangle _resizeHandle;
public ResizeAdorner(UIElement adornedElement) : base(adornedElement)
{
_visuals = new VisualCollection(this);
_resizeHandle = new Rectangle
{
Width = 10,
Height = 10,
Fill = Brushes.Blue,
Cursor = Cursors.SizeNWSE
};
_resizeHandle.MouseLeftButtonDown += OnResizeHandleMouseDown;
_visuals.Add(_resizeHandle);
}
private void OnResizeHandleMouseDown(object sender, MouseButtonEventArgs e)
{
// 实现调整大小逻辑
}
protected override Size ArrangeOverride(Size finalSize)
{
_resizeHandle.Arrange(new Rect(
finalSize.Width - 10,
finalSize.Height - 10,
10, 10));
return finalSize;
}
// 必须重写以下方法
protected override int VisualChildrenCount => _visuals.Count;
protected override Visual GetVisualChild(int index) => _visuals[index];
}
3. 动画Adorner
示例：创建带动画边框的Adorner
public class AnimatedBorderAdorner : Adorner
{
private double _animationProgress;
private AnimationClock _animationClock;
public AnimatedBorderAdorner(UIElement adornedElement) : base(adornedElement)
{
StartAnimation();
}
private void StartAnimation()
{
DoubleAnimation animation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(2)));
animation.RepeatBehavior = RepeatBehavior.Forever;
_animationClock = animation.CreateClock();
_animationClock.CurrentTimeInvalidated += OnAnimationUpdate;
}
private void OnAnimationUpdate(object sender, EventArgs e)
{
_animationProgress = _animationClock.CurrentTime.Value.TotalSeconds / 2;
InvalidateVisual(); // 强制重绘
}
protected override void OnRender(DrawingContext drawingContext)
{
Rect rect = new Rect(AdornedElement.RenderSize);
Pen pen = new Pen(
new LinearGradientBrush(Colors.Red, Colors.Yellow, _animationProgress * 360),
2 * _animationProgress);
drawingContext.DrawRectangle(null, pen, rect);
}
}
4. 类似Popup的Adorner
示例：实现类似Word的选中文本工具栏
public class TextToolbarAdorner : Adorner
{
private VisualCollection _visuals;
private Grid _toolbar;
public TextToolbarAdorner(UIElement adornedElement, Point position) : base(adornedElement)
{
_visuals = new VisualCollection(this);
_toolbar = new Grid
{
Width = 120,
Height = 30,
Background = Brushes.LightGray
};
// 添加工具栏按钮等
Button boldBtn = new Button { Content = "B" };
_toolbar.Children.Add(boldBtn);
_toolbar.Margin = new Thickness(position.X, position.Y - 35, 0, 0);
_visuals.Add(_toolbar);
}
// 必须重写的方法
protected override int VisualChildrenCount => _visuals.Count;
protected override Visual GetVisualChild(int index) => _visuals[index];
protected override Size ArrangeOverride(Size finalSize)
{
_toolbar.Arrange(new Rect(finalSize));
return finalSize;
}
}
// 使用示例
private void OnTextSelected(object sender, RoutedEventArgs e)
{
Point selectionPosition = GetSelectionPosition(); // 获取选中文本位置
AdornerLayer layer = AdornerLayer.GetAdornerLayer(textBox);
layer.Add(new TextToolbarAdorner(textBox, selectionPosition));
}
四、Adorner高级主题
1. AdornerLayer的工作原理
AdornerLayer是Adorner的容器，WPF中通常由以下两种方式提供：
- AdornerDecorator：显式创建Adorner层
- ScrollContentPresenter：WPF内部隐式添加
在视觉树中，AdornerLayer通常位于最顶层，确保Adorner始终显示在其他内容之上。
2. 性能优化建议
- 尽量减少Adorner的重绘：对于复杂Adorner，避免频繁调用InvalidateVisual()
- 合理使用VisualCollection：对于包含多个子元素的Adorner，使用VisualCollection管理
- 适时移除不需要的Adorner：避免保留不再使用的Adorner
3. 与Popup的对比
| 特性 | Adorner | Popup |
|---|---|---|
| 布局系统 | 独立布局系统 | 参与主布局系统 |
| 层级控制 | 始终在最顶层 | 可通过ZIndex控制 |
| 事件处理 | 可控制是否拦截事件 | 通常拦截事件 |
| 使用场景 | 装饰、视觉反馈 | 浮动菜单、对话框 |
五、总结
Adorner是WPF中一个功能强大且灵活的特性，它允许开发者在现有UI元素之上添加各种视觉效果和交互功能，而不会破坏原有的布局结构。通过本文的介绍，您应该已经掌握了Adorner的基本用法和常见应用场景。
在实际项目中，Adorner可以用于实现：
- 视觉提示和状态反馈（如焦点框、错误提示）
- 交互增强（如调整大小、旋转把手）
- 自定义装饰效果（如角标、动画边框）
- 浮动工具栏和上下文菜单
通过合理利用Adorner，可以大大增强WPF应用程序的用户体验和视觉效果。
