Avalonia Canvas绘制网格无显示问题求助

核心问题 #

你看不到网格的主要原因有两个：

1. 绘制层级错误：你重写的是UserControl的Render方法，UserControl的绘制内容会显示在其所有子控件的下方。你的gridCanvas作为UserControl的子控件，它的米色背景完全覆盖了你在UserControl层绘制的网格，所以即使代码执行了，也看不到效果。
2. 参数设置矛盾：gridSize=2（网格间距2）但笔的厚度设为20，这会导致所有线条完全重叠，就算能显示，也只会是一片黑色，而非预期的网格。

解决方案：自定义Canvas控件 #

正确的做法是重写Canvas自身的Render方法，这样绘制的网格会直接叠加在Canvas的内容层上：

1. 创建自定义Canvas类：

public class GridCanvas : Canvas
{
    // 调整为合适的网格间距，这里设为10
    private double gridSize = 10;
    // 笔厚度设为1，避免线条重叠
    private Pen gridPen = new Pen(Brushes.Black, 1);

    public override void Render(DrawingContext context)
    {
        base.Render(context);
        DrawGrid(context);
    }

    private void DrawGrid(DrawingContext context)
    {
        var canvasWidth = Bounds.Width;
        var canvasHeight = Bounds.Height;

        // 绘制竖线
        for (double x = 0; x < canvasWidth; x += gridSize)
        {
            context.DrawLine(gridPen, new Point(x, 0), new Point(x, canvasHeight));
        }

        // 绘制横线
        for (double y = 0; y < canvasHeight; y += gridSize)
        {
            context.DrawLine(gridPen, new Point(0, y), new Point(canvasWidth, y));
        }
    }
}

2. 在XAML中使用自定义控件：

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:AvaloniaTest"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="AvaloniaTest.Tests">

    <local:GridCanvas Background="Beige">
        <Rectangle Fill="Red" Canvas.Left="10" Canvas.Top="10" Width="5" Height="5"/>
    </local:GridCanvas>
    
</UserControl>

额外说明 #

• 自定义Canvas的Render方法会在Canvas自身内容绘制完成后执行，所以网格会显示在红色矩形的下方（如果需要网格在上方，可以调整base.Render(context)的调用顺序，放在DrawGrid之后，但通常网格作为背景层更合理）。
• 调整gridSize和笔的厚度可以获得不同的网格效果，确保间距大于笔厚度，避免线条重叠。

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