Wpf repeating lines with gradient as background - wpf

Question

I need to make a background looks like this:
I found the way to do it with <DrawingBrush TileMode="Tile"> but it's not allow to make a gradient, because this generats many repeating squares. Maybe exists any ways to do it dynamicly, not in xaml?

Answer 1

I had to do something very similar and chose to create a grid dynamically in C#, the method was called upon on the Canvas-loaded event.
The "max_value" is the max size in pixels you want the grid to be, I set mine to 3500.
The "ScaleFactor" is the spacing in between the lines/ the size of the squares, I set mine to 15.
The "Canvas" is simply the canvas you want to apply the grid too.
I did have to extract the code and tweak it from a larger program but it should still work, but I don't have an IDE to test it currently.
class GridLine //Declares a grid-line object
{ //Declares a variety of different line lists, used for different parts of the grid.
private List<Line> XGridline { get; set; } = new List<Line>();
private List<Line> YGridline { get; set; } = new List<Line>();
private Line[] Axis { get; set; } = new Line[2];
//Used to draw the grid.
public GridLine DrawGrid(int max_value, int scale_factor, Canvas canvas) //Draws the grid
{
int x = 0;
int y = 0;
while (x < max_value) // Used to draw lines from the center out to the far right.
{
YGridline.Add(new Line() {
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 2,
X1 = x,
Y1 = -max_value,
X2 = x,
Y2 = max_value
});
canvas.Children.Add(YGridline[YGridline.Count - 1]);
x += scale_factor;
}
x = 0;
y = 0;
while (x > -max_value) //used to draw lines from the center to the far left.
{
YGridline.Add(new Line() {StrokeThickness = 2,
Stroke = new SolidColorBrush(Colors.Black),
X1 = x ,
Y1 = -max_value,
X2 = x,
Y2 = max_value
});
canvas.Children.Add(YGridline[YGridline.Count - 1]);
x -= scale_factor;
}
y = 0;
x = 0;
while (y < max_value) //used to draw lines from the center to the bottom
{
XGridline.Add(new Line() {
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 2,
X1 = -max_value,
Y1 = y,
X2 = max_value,
Y2 = y
});
canvas.Children.Add(XGridline[XGridline.Count - 1]);
y += scale_factor;
}
y = 0;
x = 0;
while (y > -max_value) //Used to draw lines from the center to the top.
{
XGridline.Add(new Line() {
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 2,
X1 = -max_value,
Y1 = y,
X2 = max_value,
Y2 = y
});
canvas.Children.Add(XGridline[XGridline.Count - 1]);
y -= scale_factor;
}
//VERTICLE LINE- Y Axis
Axis[0] = (new Line() { Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 3, X1 = 0, Y1 = -max_value, X2 = 0, Y2 = max_value });
canvas.Children.Add(Axis[0]);
//Horizontal line - X Axis
Axis[1] = (new Line() { Stroke = new SolidColorBrush(Colors.Black), StrokeThickness = 3, X1 = -max_value, Y1 = 0, X2 = max_value, Y2 = 0 });
canvas.Children.Add(Axis[1]);
return this;
}
}
EDIT:
If you'd just like to have a gradient background, why don't you set the rectangles to have no/ a transparent fill then set a gradient background behind them? I would still suggest looking at my code, because depending on what you intend to do with the grid later you may find it easier to generate a grid pragmatically.