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

如果我理解正确，您想将小矩形均匀地分布在父矩形的宽度上。

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

给出父矩形的宽度 parentWidht和子矩形的数量 units，每个子矩形的宽度为：

var childWidht = parentWidht / units;

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

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

这为您提供了每个子项的宽度，您现在只需根据先前计算的childWidht移动每个子项矩形。

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

更新评论中的问题

这样我就可以填充一行，但是如何填充其余的行（也填充父级的高度）？

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

首先计算子矩形高度（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
    }
}

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

1 个答案:

更新评论中的问题