如何缩放PictureBox组件以使其最适合屏幕上的给定空间，同时保持其高宽比(与实际图像或其SizeMode相互依赖)?
How can I scale PictureBox components to best fit the given space on the screen while keeping their aspect ratio (interdependent of the actual image or its SizeMode) ?
我测试了将FlowLayout的Dock和PictureBox设置为Fill.我还使用面板作为包装器进行了测试，并测试了AutoSize和AutoSizeMode的不同设置.
I tested setting the Dock of the FlowLayout and the PictureBox to Fill. I also tested using a Panel as a wrapper and tested different settings for AutoSize and AutoSizeMode.
要提供有关背景的更多信息:我想在应用程序的视口中动态添加和删除图像，因此TableLayout首先是静态的.我必须承认，我也在考虑手动计算位置的大小-或动态调整TableLayout的行数和列数-但对我来说似乎容易出错.我认为拥有FlowLayout和自动调整大小的组件应该是正确的方法-但这似乎行不通. (要以Web开发人员的身份发言，我只是想浮动图像左移"，将宽度和高度设置为'自动'"并且不进行滚动.)
To give more information about the background: I want to dynamically add and remove images in the viewport of the application, so a TableLayout is in the first step sort of to static. I have to admit I'm was also thinking of calculating the size an position manually - or to dynamically adapt the row and column count of the TableLayout - but it seems to me prone to errors. I thought having a FlowLayout and automatically sized components should be the correct way - but it seems not to work that way. (To speak as web developer, I simply want to "float the images left", "with width and height set to 'auto'" and no scrolling.)
图像应该对此进行可视化:如果只有一个PictureBox，则第一个数字应指出布局-它占用了整个空间(或在给定的宽高比下尽可能大).第二个显示了如果有两张(三张或四张)图像，我希望布局如何.第三幅图基本上显示了一个调整大小的窗口，其中包含三个(至六个)图像.
The images should visualize this a bit: the first figure should point out the layout, if there is only one PictureBox - it takes the whole space (or as big as possible with the given aspect ratio). The second shows how I would like the Layout to be, if there are two (three or four) images. The third figure is showing basically a resized window with three (to six) images.
我有什么想念的地方吗?
Is there some point I'm missing?
推荐答案
此代码段将执行以下操作:
This code snippet do this:
它根据长宽比排列容器内的可见控件(请参见代码中的R变量)，并使用容器边距值获取项目之间的水平和垂直间隙.容器的填充也得到处理.
It arranges the visible controls inside a container in respect of the aspect ratio (see R variable in the code), and uses the container margin values to get horizontal and vertical gaps between items. The padding of the container is also handled.
public static void Arrange(Control container) { var H = container.DisplayRectangle.Height; var W = container.DisplayRectangle.Width; var N = container.Controls.OfType<Control>().Count(c => c.Visible); var R = 4 / 3d; // item aspect ratio var margin = container.Margin; var padding = container.Padding; var horizontalGap = margin.Left + margin.Right; var verticalGap = margin.Top + margin.Bottom; if (N == 0) return; var bestSizedItem = ( // Try n rows Enumerable.Range(1, N).Select(testRowCount => { var testItemHeight = (H - verticalGap * (testRowCount - 1)) / testRowCount; return new { testColCount = (int)Math.Ceiling((double)N / testRowCount), testRowCount = testRowCount, testItemHeight = (int)testItemHeight, testItemWidth = (int)(testItemHeight * R) }; }) // Try n columns .Concat( Enumerable.Range(1, N).Select(testColCount => { var testItemWidth = (W - horizontalGap * (testColCount - 1)) / testColCount; return new { testColCount = testColCount, testRowCount = (int)Math.Ceiling((double)N / testColCount), testItemHeight = (int)(testItemWidth / R), testItemWidth = (int)testItemWidth }; }))) // Remove when it's too big .Where(item => item.testItemWidth * item.testColCount + horizontalGap * (item.testColCount - 1) <= W && item.testItemHeight * item.testRowCount + verticalGap * (item.testRowCount - 1) <= H) // Get the biggest area .OrderBy(item => item.testItemHeight * item.testItemWidth) .LastOrDefault(); Debug.Assert(bestSizedItem != null); if (bestSizedItem == null) return; int x = container.DisplayRectangle.X; int y = container.DisplayRectangle.Y; foreach (var control in container.Controls.OfType<Control>().Where(c => c.Visible)) { control.SetBounds(x, y, bestSizedItem.testItemWidth, bestSizedItem.testItemHeight); x += bestSizedItem.testItemWidth + horizontalGap; if (x + bestSizedItem.testItemWidth - horizontalGap > W) { x = container.DisplayRectangle.X; y += bestSizedItem.testItemHeight + verticalGap; } } }我将此代码段放在要点上，因此您可以根据需要提供帮助.
I put this snippet on Gist so you can contribute if you wish.