WPF标注装饰器
标注
在许多地方我们都会用到标注，比如在画图中：
在Office中：
在Foxit Reader中：
在Blend中：
等等。
简介
以前，因项目上需要做标注，简单找了一下，没发现适合要求的控件（包括Blend中的标注，标注的两个点距离是固定的）。所以自己简单的写了一个。后来又私下修改了几次，基本完成了圆角矩形的标注。
效果图如下：
对应的XAML代码如下：
<local:CalloutDecorator Margin="5" AnchorOffsetX="150" AnchorOffsetY="50" Background="Purple" BorderBrush="Red" BorderThickness="10,20,30,40" CornerRadius="10,20,30,40" Dock="Left" FirstOffset="110" Padding="40" SecondOffset="130"> <Border Background="Yellow" /> </local:CalloutDecorator>
支持设置锚点（AnchorOffsetX和AnchorOffsetY）、与锚点相对应的两个点的坐标（FirstOffset
和SecondOffset）、朝向（Dock）、圆角信息（CornerRadius）、边框信息（BorderThickness、BorderBrush）、保留空间（Padding）、背景（Background）。
设置各项参数时需要注意，不能让与锚点相对应的两个点的坐标都边框以内，否则会产生奇怪的效果。
但是好在我们一般情况下都不会将边框设的过大，而将两个点设置的较小。
代码
代码中重载了WPF三个重要过程，测量（MeasureOverride）、布局（ArrangeOverride）、绘制（OnRender）。为了提高绘制效率，使用了缓存。代码较简单，也有注释，就不再多说了。
namespace YiYan127.WPF.Decorator { using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media; /// <summary> /// 标注式装饰器 /// </summary> public class CalloutDecorator : Border { #region Fields #region DependencyProperty public static readonly DependencyProperty DockProperty = DependencyProperty.Register( "Dock", typeof(Dock), typeof(CalloutDecorator), new FrameworkPropertyMetadata(Dock.Bottom, Refresh)); public static readonly DependencyProperty AnchorOffsetXProperty = DependencyProperty.Register( "AnchorOffsetX", typeof(double), typeof(CalloutDecorator), new FrameworkPropertyMetadata(20.0, Refresh), DoubleGreatterThanZero); public static readonly DependencyProperty AnchorOffsetYProperty = DependencyProperty.Register( "AnchorOffsetY", typeof(double), typeof(CalloutDecorator), new FrameworkPropertyMetadata(20.0, Refresh), DoubleGreatterThanZero); public static readonly DependencyProperty FirstOffsetProperty = DependencyProperty.Register( "FirstOffset", typeof(double), typeof(CalloutDecorator), new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsArrange), DoubleGreatterThanZero); public static readonly DependencyProperty SecondOffsetProperty = DependencyProperty.Register( "SecondOffset", typeof(double), typeof(CalloutDecorator), new FrameworkPropertyMetadata(20.0, FrameworkPropertyMetadataOptions.AffectsArrange), DoubleGreatterThanZero); #endregion DependencyProperty /// <summary> /// 刷新选项 /// </summary> private const FrameworkPropertyMetadataOptions Refresh = FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsArrange; /// <summary> /// 是否为Callout模式,为false的话,表示border模式 /// </summary> private bool isCalloutMode; /// <summary> /// 背景的缓存 /// </summary> private StreamGeometry backgroundGeometryCache; /// <summary> /// 标注的缓存 /// </summary> private StreamGeometry calloutGeometryCache; #endregion Fields #region Properties /// <summary> /// 引线朝向(左、上、右、下) /// </summary> public Dock Dock { get { return (Dock)GetValue(DockProperty); } set { this.SetValue(DockProperty, value); } } /// <summary> /// X方向的锚点偏移(针对子控件) /// </summary> public double AnchorOffsetX { get { return (double)GetValue(AnchorOffsetXProperty); } set { this.SetValue(AnchorOffsetXProperty, value); } } /// <summary> /// Y方向的锚点偏移(针对子控件) /// </summary> public double AnchorOffsetY { get { return (double)GetValue(AnchorOffsetYProperty); } set { this.SetValue(AnchorOffsetYProperty, value); } } /// <summary> /// 在对应的轴上第一个偏移位置 /// </summary> public double FirstOffset { get { return (double)GetValue(FirstOffsetProperty); } set { this.SetValue(FirstOffsetProperty, value); } } /// <summary> /// 在对应的轴上的第二个偏移位置 /// </summary> public double SecondOffset { get { return (double)GetValue(SecondOffsetProperty); } set { this.SetValue(SecondOffsetProperty, value); } } #endregion Properties #region Overrides /// <summary> /// 重载测量过程 /// </summary> /// <param name="constraint">约束</param> /// <returns>需要的大小</returns> protected override Size MeasureOverride(Size constraint) { this.isCalloutMode = (this.Child != null) && (!IsZero(this.AnchorOffsetX) && (!IsZero(this.AnchorOffsetY))); if (!this.isCalloutMode) { return base.MeasureOverride(constraint); } Size borderSize = GetDesiredSize(this.BorderThickness); Size paddingSize = GetDesiredSize(this.Padding); // 最少需要的大小 var basicSize = new Size(borderSize.Width + paddingSize.Width, borderSize.Height + paddingSize.Height); // 计算需要的实际大小 switch (Dock) { case Dock.Left: case Dock.Right: { // 宽度不能小于0 double availableWidth = Math.Max(0, constraint.Width - basicSize.Width - this.AnchorOffsetX); var availableSize = new Size(availableWidth, Math.Max(0.0, constraint.Height - basicSize.Height)); this.Child.Measure(availableSize); Size desiredSize = this.Child.DesiredSize; return new Size( desiredSize.Width + basicSize.Width + this.AnchorOffsetX, desiredSize.Height + basicSize.Height); } case Dock.Top: case Dock.Bottom: { double availableHeight = Math.Max(0, constraint.Height - basicSize.Height - this.AnchorOffsetY); var availableSize = new Size(Math.Max(0.0, constraint.Width - basicSize.Width), availableHeight); this.Child.Measure(availableSize); Size desiredSize = this.Child.DesiredSize; return new Size( desiredSize.Width + basicSize.Width, desiredSize.Height + basicSize.Height + this.AnchorOffsetY); } } return basicSize; } /// <summary> /// 重载布局过程 /// </summary> /// <param name="finalSize">可用的布局大小</param> /// <returns>布局大小</returns> protected override Size ArrangeOverride(Size finalSize) { if (!this.isCalloutMode) { return base.ArrangeOverride(finalSize); } var boundaryRect = new Rect(finalSize); var outterRect = new Rect(); switch (Dock) { #region 根据不同的Dock进行处理 case Dock.Left: { outterRect = DeflateRect(boundaryRect, new Thickness(this.AnchorOffsetX, 0, 0, 0)); break; } case Dock.Right: { outterRect = DeflateRect(boundaryRect, new Thickness(0, 0, this.AnchorOffsetX, 0)); break; } case Dock.Top: { outterRect = DeflateRect(boundaryRect, new Thickness(0, this.AnchorOffsetY, 0, 0)); break; } case Dock.Bottom: { outterRect = DeflateRect(boundaryRect, new Thickness(0, 0, 0, this.AnchorOffsetY)); break; } #endregion 根据不同的Dock进行处理 } Rect innerRect = DeflateRect(outterRect, this.BorderThickness); Rect finalRect = DeflateRect(innerRect, this.Padding); this.Child.Arrange(finalRect); var innerPoints = new BorderPoints(this.CornerRadius, this.BorderThickness, false); if (!IsZero(innerRect.Width) && !IsZero(innerRect.Height)) { var streamGeometry = new StreamGeometry(); using (StreamGeometryContext streamGeometryContext = streamGeometry.Open()) { this.GenerateGeometry(streamGeometryContext, innerRect, innerPoints, boundaryRect); } streamGeometry.Freeze(); this.backgroundGeometryCache = streamGeometry; } else { this.backgroundGeometryCache = null; } if (!IsZero(outterRect.Width) && !IsZero(outterRect.Height)) { var outterPoints = new BorderPoints(this.CornerRadius, this.BorderThickness, true); var streamGeometry = new StreamGeometry(); using (StreamGeometryContext streamGeometryContext = streamGeometry.Open()) { this.GenerateGeometry(streamGeometryContext, outterRect, outterPoints, boundaryRect); if (this.backgroundGeometryCache != null) { this.GenerateGeometry(streamGeometryContext, innerRect, innerPoints, boundaryRect); } } streamGeometry.Freeze(); this.calloutGeometryCache = streamGeometry; } else { this.calloutGeometryCache = null; } return finalSize; } /// <summary> /// 重载绘制 /// </summary> /// <param name="dc"></param> protected override void OnRender(DrawingContext dc) { if (!this.isCalloutMode) { base.OnRender(dc); return; } if (this.calloutGeometryCache != null && this.BorderBrush != null) { dc.DrawGeometry(this.BorderBrush, null, this.calloutGeometryCache); } if (this.backgroundGeometryCache != null && this.Background != null) { dc.DrawGeometry(this.Background, null, this.backgroundGeometryCache); } } #endregion Overrides #region Private Methods /// <summary> /// 验证类型为double且大于0 /// </summary> /// <param name="value">值</param> /// <returns>数据为double类型且大于0</returns> private static bool DoubleGreatterThanZero(object value) { return (value is double) && ((double)value) > 0; } /// <summary> /// 获取期望的大小 /// </summary> /// <param name="thickness">边框信息</param> /// <returns>期望的大小</returns> private static Size GetDesiredSize(Thickness thickness) { return new Size(thickness.Left + thickness.Right, thickness.Top + thickness.Bottom); } /// <summary> /// 返回在矩形中留出边框后的矩形 /// </summary> /// <param name="rt">矩形</param> /// <param name="thick">边框</param> /// <returns>留出边框后的矩形</returns> private static Rect DeflateRect(Rect rt, Thickness thick) { return new Rect(rt.Left + thick.Left, rt.Top + thick.Top, Math.Max(0.0, rt.Width - thick.Left - thick.Right), Math.Max(0.0, rt.Height - thick.Top - thick.Bottom)); } /// <summary> /// 判断一个数是否为0 /// </summary> /// <param name="value">数</param> /// <returns>为0返回true,否则返回false</returns> private static bool IsZero(double value) { return Math.Abs(value) < 2.22044604925031E-15; } /// <summary> /// 返回过两点的直线在Y坐标上的X坐标 /// </summary> /// <param name="point1">第一个点</param> /// <param name="point2">第二个点</param> /// <param name="y">Y坐标</param> /// <returns>对应的X坐标</returns> private static double CalculateLineX(Point point1, Point point2, double y) { return point1.X - ((point1.X - point2.X) * (point1.Y - y) / (point1.Y - point2.Y)); } /// <summary> /// 返回过两点的直线在X坐标上的Y坐标 /// </summary> /// <param name="point1">第一个点</param> /// <param name="point2">第二个点</param> /// <param name="x">X坐标</param> /// <returns>对应的Y坐标</returns> private static double CalculateLineY(Point point1, Point point2, double x) { return point1.Y - ((point1.X - x) * (point1.Y - point2.Y) / (point1.X - point2.X)); } /// <summary> /// 生成形状 /// </summary> /// <param name="ctx">绘制上下文</param> /// <param name="rect">绘制所在的矩形</param> /// <param name="points">边框绘制点</param> /// <param name="boundaryRect">绘制的外边界</param> private void GenerateGeometry(StreamGeometryContext ctx, Rect rect, BorderPoints points, Rect boundaryRect) { var leftTopPt = new Point(points.LeftTop, 0.0); var rightTopPt = new Point(rect.Width - points.RightTop, 0.0); var topRightPt = new Point(rect.Width, points.TopRight); var bottomRightPt = new Point(rect.Width, rect.Height - points.BottomRight); var rightBottomPt = new Point(rect.Width - points.RightBottom, rect.Height); var leftBottomPt = new Point(points.LeftBottom, rect.Height); var bottomLeftPt = new Point(0.0, rect.Height - points.BottomLeft); var topLeftPt = new Point(0.0, points.TopLeft); if (leftTopPt.X > rightTopPt.X) { double x = points.LeftTop / (points.LeftTop + points.RightTop) * rect.Width; leftTopPt.X = x; rightTopPt.X = x; } if (topRightPt.Y > bottomRightPt.Y) { double y = points.TopRight / (points.TopRight + points.BottomRight) * rect.Height; topRightPt.Y = y; bottomRightPt.Y = y; } if (rightBottomPt.X < leftBottomPt.X) { double x2 = points.LeftBottom / (points.LeftBottom + points.RightBottom) * rect.Width; rightBottomPt.X = x2; leftBottomPt.X = x2; } if (bottomLeftPt.Y < topLeftPt.Y) { double y2 = points.TopLeft / (points.TopLeft + points.BottomLeft) * rect.Height; bottomLeftPt.Y = y2; topLeftPt.Y = y2; } var vector = new Vector(rect.TopLeft.X, rect.TopLeft.Y); leftTopPt += vector; rightTopPt += vector; topRightPt += vector; bottomRightPt += vector; rightBottomPt += vector; leftBottomPt += vector; bottomLeftPt += vector; topLeftPt += vector; ctx.BeginFigure(leftTopPt, true, true); if (this.Dock == Dock.Top) { var secondOutPoint = new Point(this.SecondOffset, this.AnchorOffsetY); var firstOutPoint = new Point(this.FirstOffset, this.AnchorOffsetY); var calloutPoint = new Point(this.AnchorOffsetX, 0); ctx.LineTo(new Point(CalculateLineX(calloutPoint, firstOutPoint, rect.Top), rect.Top), true, false); ctx.LineTo(calloutPoint, true, false); ctx.LineTo(new Point(CalculateLineX(calloutPoint, secondOutPoint, rect.Top), rect.Top), true, false); } ctx.LineTo(rightTopPt, true, false); double sizeX = rect.TopRight.X - rightTopPt.X; double sizeY = topRightPt.Y - rect.TopRight.Y; if (!IsZero(sizeX) || !IsZero(sizeY)) { ctx.ArcTo(topRightPt, new Size(sizeX, sizeY), 0.0, false, SweepDirection.Clockwise, true, false); } if (this.Dock == Dock.Right) { var secondOutPoint = new Point(boundaryRect.Width - this.AnchorOffsetX, this.SecondOffset); var firstOutPoint = new Point(boundaryRect.Width - this.AnchorOffsetX, this.FirstOffset); var calloutPoint = new Point(boundaryRect.Width, this.AnchorOffsetY); ctx.LineTo(new Point(rect.Right, CalculateLineY(calloutPoint, firstOutPoint, rect.Right)), true, false); ctx.LineTo(calloutPoint, true, false); ctx.LineTo(new Point(rect.Right, CalculateLineY(calloutPoint, secondOutPoint, rect.Right)), true, false); } ctx.LineTo(bottomRightPt, true, false); sizeX = rect.BottomRight.X - rightBottomPt.X; sizeY = rect.BottomRight.Y - bottomRightPt.Y; if (!IsZero(sizeX) || !IsZero(sizeY)) { ctx.ArcTo(rightBottomPt, new Size(sizeX, sizeY), 0.0, false, SweepDirection.Clockwise, true, false); } if (this.Dock == Dock.Bottom) { var secondOutPoint = new Point(this.SecondOffset, boundaryRect.Height - this.AnchorOffsetY); var firstOutPoint = new Point(this.FirstOffset, boundaryRect.Height - this.AnchorOffsetY); var calloutPoint = new Point(this.AnchorOffsetX, boundaryRect.Height); ctx.LineTo(new Point(CalculateLineX(calloutPoint, secondOutPoint, rect.Bottom), rect.Bottom), true, false); ctx.LineTo(calloutPoint, true, false); ctx.LineTo(new Point(CalculateLineX(calloutPoint, firstOutPoint, rect.Bottom), rect.Bottom), true, false); } ctx.LineTo(leftBottomPt, true, false); sizeX = leftBottomPt.X - rect.BottomLeft.X; sizeY = rect.BottomLeft.Y - bottomLeftPt.Y; if (!IsZero(sizeX) || !IsZero(sizeY)) { ctx.ArcTo(bottomLeftPt, new Size(sizeX, sizeY), 0.0, false, SweepDirection.Clockwise, true, false); } if (this.Dock == Dock.Left) { var secondOutPoint = new Point(this.AnchorOffsetX, this.SecondOffset); var firstOutPoint = new Point(this.AnchorOffsetX, this.FirstOffset); var calloutPoint = new Point(0, this.AnchorOffsetY); ctx.LineTo(new Point(rect.Left, CalculateLineY(calloutPoint, firstOutPoint, rect.Left)), true, false); ctx.LineTo(calloutPoint, true, false); ctx.LineTo(new Point(rect.Left, CalculateLineY(calloutPoint, secondOutPoint, rect.Left)), true, false); } ctx.LineTo(topLeftPt, true, false); sizeX = leftTopPt.X - rect.TopLeft.X; sizeY = topLeftPt.Y - rect.TopLeft.Y; if (!IsZero(sizeX) || !IsZero(sizeY)) { ctx.ArcTo(leftTopPt, new Size(sizeX, sizeY), 0.0, false, SweepDirection.Clockwise, true, false); } } #endregion Private Methods /// <summary> /// 边框绘制点 /// </summary> private struct BorderPoints { internal readonly double LeftTop; internal readonly double TopLeft; internal readonly double TopRight; internal readonly double RightTop; internal readonly double RightBottom; internal readonly double BottomRight; internal readonly double BottomLeft; internal readonly double LeftBottom; /// <summary> /// 构造函数 /// </summary> /// <param name="borderCornerRadius">圆角信息</param> /// <param name="boderThickness">边框信息</param> /// <param name="outer">是否为外部</param> internal BorderPoints(CornerRadius borderCornerRadius, Thickness boderThickness, bool outer) { double halfLeft = 0.5 * boderThickness.Left; double halfTop = 0.5 * boderThickness.Top; double halfRight = 0.5 * boderThickness.Right; double halfBottom = 0.5 * boderThickness.Bottom; if (outer) { if (IsZero(borderCornerRadius.TopLeft)) { this.LeftTop = this.TopLeft = 0.0; } else { this.LeftTop = borderCornerRadius.TopLeft + halfLeft; this.TopLeft = borderCornerRadius.TopLeft + halfTop; } if (IsZero(borderCornerRadius.TopRight)) { this.TopRight = this.RightTop = 0.0; } else { this.TopRight = borderCornerRadius.TopRight + halfTop; this.RightTop = borderCornerRadius.TopRight + halfRight; } if (IsZero(borderCornerRadius.BottomRight)) { this.RightBottom = this.BottomRight = 0.0; } else { this.RightBottom = borderCornerRadius.BottomRight + halfRight; this.BottomRight = borderCornerRadius.BottomRight + halfBottom; } if (IsZero(borderCornerRadius.BottomLeft)) { this.BottomLeft = this.LeftBottom = 0.0; } else { this.BottomLeft = borderCornerRadius.BottomLeft + halfBottom; this.LeftBottom = borderCornerRadius.BottomLeft + halfLeft; } } else { this.LeftTop = Math.Max(0.0, borderCornerRadius.TopLeft - halfLeft); this.TopLeft = Math.Max(0.0, borderCornerRadius.TopLeft - halfTop); this.TopRight = Math.Max(0.0, borderCornerRadius.TopRight - halfTop); this.RightTop = Math.Max(0.0, borderCornerRadius.TopRight - halfRight); this.RightBottom = Math.Max(0.0, borderCornerRadius.BottomRight - halfRight); this.BottomRight = Math.Max(0.0, borderCornerRadius.BottomRight - halfBottom); this.BottomLeft = Math.Max(0.0, borderCornerRadius.BottomLeft - halfBottom); this.LeftBottom = Math.Max(0.0, borderCornerRadius.BottomLeft - halfLeft); } } } } }
