WPF Canvas 带虚线网格线背景样式实现

核心功能是为 Canvas 控件创建带虚线网格线的背景样式，通过自定义 DrawingBrush 实现重复排列的网格效果。

一、样式基础信息

• 目标控件：Canvas（画布控件），样式通过 x:Key="canvasBackground" 标识，需手动为 Canvas 控件指定 Style="{StaticResource canvasBackground}" 才能生效。

• 核心实现逻辑：通过 Setter 重写 Canvas 的 Background 属性，使用 DrawingBrush 作为背景绘制载体，而非传统纯色或图片，实现灵活的网格线定制。

二、网格线关键配置

1. DrawingBrush 基础设置（控制网格重复规则）

• TileMode="Tile"：设置网格 “平铺模式”，即让绘制的基础网格单元在 Canvas 背景中重复排列，填满整个画布。

• Viewport="0,0,35,35"：定义网格单元的 “视口范围”，其中 (0,0) 是单元起始坐标，35,35 表示每个网格单元的宽高均为 35 像素，即网格线的间距为 35 像素。

• ViewportUnits="Absolute"：指定 Viewport 的单位为 “绝对像素”，确保网格间距不随 Canvas 尺寸缩放而变化。

2. 网格线外观定义（控制线条样式）

通过 GeometryDrawing 组合 “画笔（Pen）” 和 “几何图形（Geometry）”，实现网格线绘制：

• 画笔（Pen）：定义线条的视觉属性

  • Brush="#DCE6EB"：网格线颜色为浅灰蓝色（低饱和度，避免遮挡画布内容）。

  • Thickness="0.5"：线条宽度为 0.5 像素（细线条，保持背景简洁）。

  • DashStyle Dashes="6,6"：线条为 “虚线样式”，实线段与空白段长度均为 6 像素，增强网格的轻量化视觉效果。

• 几何图形（GeometryGroup）：定义线条的形状与位置

  • 包含两条 LineGeometry（直线）：一条垂直方向（StartPoint="0,0" EndPoint="0,20"）、一条水平方向（StartPoint="0,0" EndPoint="20,0"），共同构成单个网格单元的 “十字线基础”，结合 TileMode 平铺后形成完整网格。

<UserControl.Resources>
        
        <!--Canvas画布网格线背景-->
        <Style TargetType="Canvas" x:Key="canvasBackground">
            <Setter Property="Background">
                <Setter.Value>
                    <!-- 定义DrawingBrush，用于绘制网格线 -->
                    <DrawingBrush TileMode="Tile" Viewport="0,0,35,35" ViewportUnits="Absolute">
                        <DrawingBrush.Drawing>
                            <GeometryDrawing>
                                <GeometryDrawing.Pen>
                                    <!-- 设置网格线的颜色和宽度 -->
                                    <Pen Brush="#DCE6EB" Thickness="0.5">
                                        <!--定义一个虚线样式-->
                                        <Pen.DashStyle>
                                            <DashStyle Dashes="6,6"/>
                                        </Pen.DashStyle>
                                    </Pen> 
                                </GeometryDrawing.Pen>
                                <GeometryDrawing.Geometry>
                                    <!-- 创建一个几何图形，用于绘制网格线 -->
                                    <GeometryGroup>
                                        <LineGeometry StartPoint="0,0" EndPoint="0,20"/>
                                        <LineGeometry StartPoint="0,0" EndPoint="20,0"/>
                                    </GeometryGroup>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

效果图