Menu
Similar to the look of graph paper, I want to draw straight lines of different colors on the Background of a Canvas to form a grid. The following code works fine for drawing only red lines. I also want to draw some Blue lines and gray lines. That means I need two more sets of lines, and so far I've not been able to solve the issue of drawing new sets of lines of additional colors.
<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>
To reiterate...this code is doing what I want for single color. But I also want to add lines of different colors.
215
You could add multiple canvases to the root canvas, each with its own background pen:
<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>
Alternatively, you could use VisualBrush, which constructs a brush out of any UIElement. So you could make the canvas background out of a Grid with Rectangles inside, or any similar approach:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
