WPF Canvasでグリッド線を描画する方法は？

Question

私はWPFでキャンバス上の関数描画グリッド線を構築する必要があります：

void DrawGridLine(double startX, double startY, double stepX, double stepY, 
        double slop, double width, double height) 
{ 
    // How to implement draw gridline here? 
} 

私はこれについて行くだろうか？

Answer 1

WPFで何か「描画」する必要はありません。線を描きたい場合は、適切な図形を使用して描きます。

本当にシンプルになる可能性があります。グリッドを描画するだけなので、DrawingBrushを作成して1つのグリッドを描き、残りの部分を塗りつぶすことができます。あなたのタイルを描画するには、それをXの描画として考えることができます。だから、（stepXとstepYに対応）20x10タイル持っている：

（すでに水平方向と垂直方向のステップサイズを持っているので、PSを、スロープslopは冗長である）図面の世話を

<DrawingBrush x:Key="GridTile" Stretch="None" TileMode="Tile" 
       Viewport="0,0 20,10" ViewportUnits="Absolute"> 
        <!-- ^^^^^^^^^^^ set the size of the tile--> 
    <DrawingBrush.Drawing> 
     <GeometryDrawing> 
      <GeometryDrawing.Geometry> 
       <!-- draw a single X --> 
       <GeometryGroup> 
        <!-- top-left to bottom-right --> 
        <LineGeometry StartPoint="0,0" EndPoint="20,10" /> 

        <!-- bottom-left to top-right --> 
        <LineGeometry StartPoint="0,10" EndPoint="20,0" /> 
       </GeometryGroup> 
      </GeometryDrawing.Geometry> 
      <GeometryDrawing.Pen> 
       <!-- set color and thickness of lines --> 
       <Pen Thickness="1" Brush="Black" /> 
      </GeometryDrawing.Pen> 
     </GeometryDrawing> 
    </DrawingBrush.Drawing> 
</DrawingBrush> 

台詞。今度は、エッジからグリッド内にオフセットを描画するには、タイルで塗りつぶした希望の寸法の矩形を描く別のブラシを用意する必要があります。だから、widthとheight、130x120で（startXとstartYに相当）(30, 45)の開始位置を持っている：

<DrawingBrush x:Key="OffsetGrid" Stretch="None" AlignmentX="Left" AlignmentY="Top"> 
    <DrawingBrush.Transform> 
     <!-- set the left and top offsets --> 
     <TranslateTransform X="30" Y="45" /> 
    </DrawingBrush.Transform> 
    <DrawingBrush.Drawing> 
     <GeometryDrawing Brush="{StaticResource GridTile}" > 
      <GeometryDrawing.Geometry> 
       <!-- set the width and height filled with the tile from the origin --> 
       <RectangleGeometry Rect="0,0 130,120" /> 
      </GeometryDrawing.Geometry> 
     </GeometryDrawing> 
    </DrawingBrush.Drawing> 
</DrawingBrush> 

そして、最終的にはちょうどあなたのグリッドの背景（または他のパネル）として設定し、それを使用します：

：ここ

<Grid Background="{StaticResource OffsetGrid}"> 
    <!-- ... --> 
</Grid> 

は、それがのように見える終わる方法です

---

あなたが動的にブラシを生成したい場合は、ここでは上記のXAMLに基づいて、同等の機能があります：

static Brush CreateGridBrush(Rect bounds, Size tileSize) 
{ 
    var gridColor = Brushes.Black; 
    var gridThickness = 1.0; 
    var tileRect = new Rect(tileSize); 

    var gridTile = new DrawingBrush 
    { 
     Stretch = Stretch.None, 
     TileMode = TileMode.Tile, 
     Viewport = tileRect, 
     ViewportUnits = BrushMappingMode.Absolute, 
     Drawing = new GeometryDrawing 
     { 
      Pen = new Pen(gridColor, gridThickness), 
      Geometry = new GeometryGroup 
      { 
       Children = new GeometryCollection 
       { 
        new LineGeometry(tileRect.TopLeft, tileRect.BottomRight), 
        new LineGeometry(tileRect.BottomLeft, tileRect.TopRight) 
       } 
      } 
     } 
    }; 

    var offsetGrid = new DrawingBrush 
    { 
     Stretch = Stretch.None, 
     AlignmentX = AlignmentX.Left, 
     AlignmentY = AlignmentY.Top, 
     Transform = new TranslateTransform(bounds.Left, bounds.Top), 
     Drawing = new GeometryDrawing 
     { 
      Geometry = new RectangleGeometry(new Rect(bounds.Size)), 
      Brush = gridTile 
     } 
    }; 

    return offsetGrid; 
}