WPF MVVM模式下Canvas网格线性能优化问题求助

问题背景 #

将Code-Behind项目迁移到MVVM架构时，在Canvas面板添加网格线作为背景遇到性能瓶颈：

• 原Code-Behind方式逐行添加约160条网格线，初始化、缩放、平移操作流畅
• 切换到MVVM后，使用ObservableCollection绑定生成网格线，视图初始化、缩放平移时明显卡顿

尝试过的无效方案 #

• 使用BindingList替代ObservableCollection，性能仍不如原生Code-Behind实现
• 尝试自定义Shape或通过数组一次性添加网格线，未实现预期效果

最终解决方案：LineGeometry + DrawingBrush #

通过LineGeometry结合DrawingBrush绘制重复网格线，避免逐个创建Line元素，大幅提升性能。以下是实现代码：

XAML基础实现

<Canvas>
    <Canvas.Background>
        <DrawingBrush TileMode="Tile" Viewport="0,0,50,50" ViewportUnits="Absolute" Viewbox="0,0,50,50" ViewboxUnits="Absolute">
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="LightGray">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <!-- 水平网格线 -->
                            <LineGeometry StartPoint="0,0" EndPoint="50,0"/>
                            <!-- 垂直网格线 -->
                            <LineGeometry StartPoint="0,0" EndPoint="0,50"/>
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                    <GeometryDrawing.Pen>
                        <Pen Thickness="1" Brush="#E0E0E0"/>
                    </GeometryDrawing.Pen>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Canvas.Background>
</Canvas>

MVVM动态适配网格间距（可选）

如果需要根据ViewModel参数动态调整网格间距，可通过绑定DrawingBrush的Viewport和Viewbox属性实现：

<Canvas>
    <Canvas.Background>
        <DrawingBrush TileMode="Tile" 
                      Viewport="{Binding GridSpacing, Converter={StaticResource DoubleToRectConverter}}"
                      ViewportUnits="Absolute" 
                      Viewbox="{Binding GridSpacing, Converter={StaticResource DoubleToRectConverter}}"
                      ViewboxUnits="Absolute">
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="LightGray">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <LineGeometry StartPoint="0,0" EndPoint="1,0"/>
                            <LineGeometry StartPoint="0,0" EndPoint="0,1"/>
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                    <GeometryDrawing.Pen>
                        <Pen Thickness="0.01" Brush="#E0E0E0"/>
                    </GeometryDrawing.Pen>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Canvas.Background>
</Canvas>

对应的转换器代码：

public class DoubleToRectConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double spacing && spacing > 0)
        {
            return new Rect(0, 0, spacing, spacing);
        }
        return new Rect(0, 0, 50, 50);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

方案优势 #

• 无需创建大量Line元素，通过Brush平铺机制实现网格，性能接近原生Code-Behind
• 支持MVVM绑定动态调整参数，符合架构要求
• 代码简洁，维护成本低

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