Filling a big rectangle with a variable quantity of little rectangles

Question

I'm trying to fill a rectangle with a variable quantity of little rectangles but adjusting the distance between them depending on the number of units (more units->the lesser the distance between).

I'm a newbie programming WPF in C# and i don´t know how to advance from this point.

How can I do it?

The code so far:

int units = 20;
int width = 10;
int height = 20;
int top = 200;
int left = 200;
int rectangleWidth = 300;
int rectangleHeight = 100;

for (int i = 0; i < units; i++)
{
    Rectangle rec = new Rectangle()
    {
        Width = width,
        Height = height,
        Fill = Brushes.Black,
        Stroke = Brushes.White,
        StrokeThickness = 1,
        RadiusX = 3,
        RadiusY = 3,
    };

    cuadernodibujo.Children.Add(rec);
    Canvas.SetTop(rec, top);
    Canvas.SetLeft(rec, left + (i*50));
}

I have updated the code, but doesn´t work. I don´t know what am i doing wrong. The piece of code so far:

        int rectangleWidth = 500;
        int rectangleHeight = 100;
        int units = 60;
        int unitsX = 10;
        int unitsY = 6;
        var childWidht = (rectangleWidth - 2*Left) / unitsX;
        var childHeigth = (rectangleHeight - 2*Top ) / unitsY;
        int width = 10;
        int height = 20;
        double top = 100;
        double left = 100;

        for (int i = 0; i < units; i++)
        {
            Rectangle rec = new Rectangle()
            {
                Width = width,
                Height = height,
                Fill = Brushes.Black,
                Stroke = Brushes.White,
                StrokeThickness = 1,
                RadiusX = 3,
                RadiusY = 3,
            };

            cuadernodibujo.Children.Add(rec);
            for (int j = 0; j < unitsY; j++) 
            {
                Rectangle rec2 = new Rectangle()
                {
                    Width = width,
                    Height = height,
                    Fill = Brushes.Black,
                    Stroke = Brushes.White,
                    StrokeThickness = 1,
                    RadiusX = 3,
                    RadiusY = 3,
                };


                cuadernodibujo.Children.Add(rec2);
                Canvas.SetTop(rec, top + (j * childHeigth)); 

                for (int k = 0; k < unitsX; k++) 
                {
                    Rectangle rec3 = new Rectangle()
                    {
                        Width = width,
                        Height = height,
                        Fill = Brushes.Black,
                        Stroke = Brushes.White,
                        StrokeThickness = 1,
                        RadiusX = 3,
                        RadiusY = 3,
                    };
                    cuadernodibujo.Children.Add(rec3);
                    Canvas.SetLeft(rec, left + (k * childWidht)); 

                }
            }
        }

Answer 1

If I understand correctly, you want to spread the little rectangles uniformly over the width of the parent rectangle.

This is less a programming problem, then a maths problem.

Given the parent rectangle's width parentWidht and the number of child rectangles units each child rectangle has a width of:

var childWidht = parentWidht / units;

If you want to add a left and right margin (given your left variable), you need to subtract the margin from parentWidht.

var childWidht = (parentWidht - 2 * left) / units; // 2 times left, to add the margin on both sides.

This gives you the width of each child, you now only have to move each child rectangle according to the previously calculated childWidht.

...
var childWidht = (parentWidht - 2 * left) / units; 
for (int i = 0; i < units; i++)
{
    ...
    Canvas.SetLeft(rec, left + (i*childWidht));
}

Update to question in the comments

With that I can fill a single line, but how can I fill the rest of the lines (to fill the parent height as well)?

We can apply the same logic as for the horizontal filling.

1. First calculate the child rectangles height (parentHeight - 2 * top)
2. Then wrap the horizontal rectangles into a loop and move each line according to the calculated height.

Here the listing with horizontal and vertical filling.

...
var childWidht = (parentWidht - 2 * left) / unitsX; 
var childHeigth = (parentHeigth - 2 * top) / unitsY; 

for (int j = 0; j < unitsY; i++) // first loop for vertical filling
{
    for (int i = 0; i < unitsX; i++) // second loop for horizontal
    {
        var rect = new Rectangle { ... } ;
        Canvas.Children.Add(rect); // Only add once in the inner loop.
        Canvas.SetTop(rec, top + (j * childHeigth)); // here we use j, the vertical index
        Canvas.SetLeft(rec, left + (i*childWidht)); // here we use i, the horizontal index
    }
}