用可变数量的小矩形填充一个大矩形

Question

我正在尝试用可变数量的小矩形填充一个矩形，但根据单位数量调整它们之间的距离（单位越多 - > 之间的距离越小）。

我是 C# 中的 WPF 编程新手，我不知道如何从这一点开始。

我该怎么做？

目前的代码：

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));
}

我已经更新了代码，但是没有用。我不知道我做错了什么。到目前为止的代码：

        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

如果我没理解错的话，你想将 小矩形 均匀分布在 parent 矩形 的宽度上。

这不是编程问题，而是数学问题。

给定 parent 矩形的 宽度 parentWidht 和 child 个矩形的数量 units 每个 child 矩形的宽度为：

var childWidht = parentWidht / units;

如果您想添加左右边距（给定您的 left 变量），您需要从 parentWidht 中减去边距。

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

这给了你每个child的宽度，你现在只需要根据之前计算的childWidht移动每个child矩形 ].

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

更新评论中的问题

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

我们可以应用与水平填充相同的逻辑。

首先计算child个矩形的高度（parentHeight - 2 * top)
然后将水平矩形包裹成一个循环，并根据计算出的高度移动每一行。

这里是水平和垂直填充的列表。

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

用可变数量的小矩形填充一个大矩形

Filling a big rectangle with a variable quantity of little rectangles

c#

wpf

rectangles

fill

更新评论中的问题