如何在Canvas中让Adorner位于DesignerItem控件内容下方？

你遇到的问题核心在于WPF的AdornerLayer特性：所有Adorner都会被渲染在一个独立的、位于所有可视化元素之上的层中，所以不管你的DesignerItem如何调整Z顺序，它们的Adorner始终会叠加在最上层，导致重叠时文本混乱。

要解决这个问题，最直接且可靠的方案是放弃使用Adorner承载文本，转而将文本元素作为DesignerItem的子元素，这样文本的渲染层级会和DesignerItem绑定，完全跟着DesignerItem的Z顺序走。下面是具体的实现思路和代码修改：

方案1：将文本元素作为DesignerItem的子元素（推荐） #

步骤1：迁移Adorner逻辑到DesignerItem内部 #

把你原来在TextAdorner里的数学公式生成、布局逻辑，直接整合到DesignerItem中，让文本元素成为它的直接子元素。这样文本会和DesignerItem共享同一个渲染层级，重叠时自然会被上层的DesignerItem遮挡。

代码示例： #

修改DesignerItem的实现，添加公式文本的渲染逻辑：

public class DesignerItem : ContentControl
{
    private Path _textGeometry;
    private TexFormula _formula;
    private TexFormulaParser _parser;

    public Brush ForeColor { get; set; } = Brushes.Black;
    public double FontSize { get; set; } = 32;
    public string FormulaText { get; set; } = @"v^{b_i}_{c_j}";
    public HorizontalAlignment TextHorizontalAlignment { get; set; } = HorizontalAlignment.Center;
    public VerticalAlignment TextVerticalAlignment { get; set; } = VerticalAlignment.Center;

    public DesignerItem()
    {
        // 初始化公式解析器和文本路径
        _parser = new TexFormulaParser();
        _formula = _parser.Parse(FormulaText);
        _textGeometry = new Path
        {
            Fill = ForeColor,
            Stroke = ForeColor,
            StrokeThickness = 1
        };

        // 将文本路径作为子元素加入DesignerItem
        var container = new Grid();
        container.Children.Add(_textGeometry);
        this.Content = container;

        // 监听尺寸变化，实时更新文本布局
        this.SizeChanged += DesignerItem_SizeChanged;
    }

    private void DesignerItem_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        UpdateTextLayout();
    }

    private void UpdateTextLayout()
    {
        // 生成公式的Geometry（复用原Adorner的逻辑）
        _textGeometry.Data = _formula.GetRenderer(TexStyle.Display, FontSize, "Times New Roman").RenderToGeometry(0, 0);

        // 计算文本的定位坐标
        double left = 0;
        double top = 0;

        switch (TextHorizontalAlignment)
        {
            case HorizontalAlignment.Left:
                left = 0;
                break;
            case HorizontalAlignment.Right:
                left = this.RenderSize.Width - _textGeometry.RenderedGeometry.Bounds.Width;
                break;
            default:
                left = this.RenderSize.Width / 2 - _textGeometry.RenderedGeometry.Bounds.Width / 2;
                break;
        }

        switch (TextVerticalAlignment)
        {
            case VerticalAlignment.Top:
                top = 0;
                break;
            case VerticalAlignment.Bottom:
                top = this.RenderSize.Height - _textGeometry.RenderedGeometry.Bounds.Height;
                break;
            default:
                top = this.RenderSize.Height / 2 - _textGeometry.RenderedGeometry.Bounds.Height / 2;
                break;
        }

        // 调整文本路径的布局位置
        _textGeometry.Arrange(new Rect(left, top, this.RenderSize.Width, this.RenderSize.Height));
    }

    // 重写ArrangeOverride确保布局更新
    protected override Size ArrangeOverride(Size finalSize)
    {
        UpdateTextLayout();
        return base.ArrangeOverride(finalSize);
    }
}

为什么这个方案有效？ #

当文本元素是DesignerItem的子元素时，它的渲染层级完全继承自DesignerItem。当你拖动DesignerItem重叠时，WPF会根据DesignerItem在Canvas中的Z顺序渲染，上层的DesignerItem（包括它的文本子元素）会自动遮挡下层的，彻底解决文本混乱的问题。

方案2：如果坚持使用Adorner（不推荐） #

如果你因为特殊需求必须保留Adorner，那么需要自定义AdornerLayer的渲染逻辑，或者手动维护Adorner的Z顺序，但这个实现复杂且容易引发其他问题：

• 无法直接修改Adorner在AdornerLayer中的层级，只能通过自定义AdornerLayer来调整渲染顺序，这会打破WPF的默认布局体系。
• 手动同步DesignerItem和Adorner的Z顺序需要监听大量布局事件，维护成本极高。

因此，方案1是最简洁、最符合WPF设计理念的解决方案。

内容的提问来源于stack exchange，提问作者Davoud