WPF 在画布面板背景上绘制彩色网格线答案

【问题标题】：WPF Drawing Colored Grid Lines on a Canvas Panel BackgroundWPF 在画布面板背景上绘制彩色网格线
【发布时间】：2014-01-11 23:22:08
【问题描述】：

类似于方格纸的外观，我想在 Canvas 的背景上绘制不同颜色的直线以形成网格。以下代码适用于仅绘制红线。我还想画一些蓝线和灰线。这意味着我需要另外两组线条，到目前为止，我还无法解决绘制新的附加颜色线条的问题。

<Window x:Class="GridTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="700" Width="1000">

<ScrollViewer HorizontalScrollBarVisibility="Visible">
    <Canvas Width="10000" Height="10000">
        <Canvas.Background>
            <DrawingBrush Stretch="None" TileMode="Tile"
                          Viewport="0,0 100,100" ViewportUnits="Absolute">
                <DrawingBrush.Drawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Geometry>
                            <GeometryGroup>
                                <LineGeometry StartPoint="0,0" EndPoint="0,100"/>
                                <LineGeometry StartPoint="0,0" EndPoint="100,0"/>
                            </GeometryGroup>
                        </GeometryDrawing.Geometry>
                        <GeometryDrawing.Pen>
                            <Pen Thickness="1" Brush="Red"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Canvas.Background>
    </Canvas>
</ScrollViewer>

</Window>

重申......这段代码正在做我想要的单色。但我也想添加不同颜色的线条。

【问题讨论】：

标签： c# wpf canvas background

【解决方案1】：

您可以向根画布添加多个画布，每个画布都有自己的背景笔：

<ScrollViewer HorizontalScrollBarVisibility="Visible">
    <Canvas Width="10000" Height="10000">
        <Canvas  Width="10000" Height="10000">
            <Canvas.Background>
                <DrawingBrush Stretch="None" TileMode="Tile"
                          Viewport="0,0 10,10" ViewportUnits="Absolute">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <LineGeometry StartPoint="0,0" EndPoint="0,10"/>
                                    <LineGeometry StartPoint="0,0" EndPoint="10,0"/>
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Thickness="1" Brush="DarkGray"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas  Width="10000" Height="10000">
            <Canvas.Background>
                <DrawingBrush Stretch="None" TileMode="Tile"
                          Viewport="0,0 50,50" ViewportUnits="Absolute">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <LineGeometry StartPoint="0,0" EndPoint="0,50"/>
                                    <LineGeometry StartPoint="0,0" EndPoint="50,0"/>
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Thickness="1" Brush="Blue"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas  Width="10000" Height="10000">
            <Canvas.Background>
                <DrawingBrush Stretch="None" TileMode="Tile"
                          Viewport="0,0 100,100" ViewportUnits="Absolute">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <LineGeometry StartPoint="0,0" EndPoint="0,100"/>
                                    <LineGeometry StartPoint="0,0" EndPoint="100,0"/>
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Thickness="1" Brush="Red"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Canvas.Background>
        </Canvas>
    </Canvas>
</ScrollViewer>

或者，您可以使用VisualBrush，它用任何UIElement 构造一个画笔。所以你可以用Grid 和Rectangles 来制作画布背景，或者任何类似的方法：

<Canvas> 
    <Canvas.Background>
        <VisualBrush>
            <VisualBrush.Visual>
                <Grid>
                    <Rectangle Width="10000" Height="10000">
                        <Rectangle.Fill>
                            <DrawingBrush Stretch="None" TileMode="Tile"
                                Viewport="0,0 10,10" ViewportUnits="Absolute">
                                <DrawingBrush.Drawing>
                                    <GeometryDrawing>
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <LineGeometry StartPoint="0,0" EndPoint="0,10"/>
                                                <LineGeometry StartPoint="0,0" EndPoint="10,0"/>
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                        <GeometryDrawing.Pen>
                                            <Pen Thickness="1" Brush="DarkGray"/>
                                        </GeometryDrawing.Pen>
                                    </GeometryDrawing>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Width="10000" Height="10000">
                        <Rectangle.Fill>
                            <DrawingBrush Stretch="None" TileMode="Tile"
                                Viewport="0,0 50,50" ViewportUnits="Absolute">
                                <DrawingBrush.Drawing>
                                    <GeometryDrawing>
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <LineGeometry StartPoint="0,0" EndPoint="0,50"/>
                                                <LineGeometry StartPoint="0,0" EndPoint="50,0"/>
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                        <GeometryDrawing.Pen>
                                            <Pen Thickness="1" Brush="Blue"/>
                                        </GeometryDrawing.Pen>
                                    </GeometryDrawing>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Width="10000" Height="10000">
                        <Rectangle.Fill>
                            <DrawingBrush Stretch="None" TileMode="Tile"
                                Viewport="0,0 100,100" ViewportUnits="Absolute">
                                <DrawingBrush.Drawing>
                                    <GeometryDrawing>
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <LineGeometry StartPoint="0,0" EndPoint="0,100"/>
                                                <LineGeometry StartPoint="0,0" EndPoint="100,0"/>
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                        <GeometryDrawing.Pen>
                                            <Pen Thickness="1" Brush="Red"/>
                                        </GeometryDrawing.Pen>
                                    </GeometryDrawing>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Canvas.Background>
</Canvas>

【讨论】：

再次感谢...我测试了第一个选项，它就像一个冠军。我认为第一个选项是我会选择的。