用于ScrollViewer中图像的动态网格的布局

我有一个包含图像Grid的ScrollViewer 。 我不确定使用网格是否是正确的选择。 这是我希望它看起来像的模型图像：

红色框表示ScrollViewer 。 在它内部，是某种类型的布局容器（目前为Grid ），它有两行图像（绿色方块），但动态数量的列可以在运行时更改，可以滚动到。 另一个条件是我想要调整它们的大小，以便始终可以看到6个图像（并且只有6个！）。

所以在XAML中：

然后使用C＃我想我需要动态添加列。 然后听取scrollViewer1的SizeChanged事件，我需要动态计算行和列的大小，以便总是在视图中看到3个图像。 例如：

 ColumnDefinition gridColN = new ColumnDefinition(); grid1.ColumnDefinitions.Add(gridColN); 

问题＃1：动态添加更多列会使网格单元变得越来越小，并且永远不会在ScrollViewer直到有10列以上。

预期结果：最终结果应该是水平的图像流，一次可见6，当调整外部容器或窗口大小时将resize。 我试图动态调整其宽度，但将它们设置为容器宽度的1/3不起作用。

问题：这是正确的方法吗？ 我应该在ScrollViewer使用Grid吗？ 我是否必须手动计算尺寸或者是否有办法让它们装满容器？

Answer 1

网格宽度应计算为

 grid1.Width = (scrollViewer1.ViewportWidth / 3) * grid1.ColumnDefinitions.Count; grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count; 

这似乎对我有用：

XAML：

代码背后：

  private void scrollViewer1_SizeChanged(object sender, SizeChangedEventArgs e) { SizeGrid(); } private void AddColumn_Button_Click(object sender, RoutedEventArgs e) { ColumnDefinition gridColN = new ColumnDefinition(); grid1.ColumnDefinitions.Add(gridColN); SizeGrid(); } private void AddRow_Button_Click(object sender, RoutedEventArgs e) { RowDefinition row = new RowDefinition(); grid1.RowDefinitions.Add(row); SizeGrid(); } private void SizeGrid() { grid1.Width = (scrollViewer1.ViewportWidth / 3) * grid1.ColumnDefinitions.Count; grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count; }