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

Question

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

<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> 

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

Answer 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>