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

Question

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

红色框代表ScrollViewer。在其中，是某种类型的布局容器(目前为 Grid)，它有两行图像(绿色方 block )，但列的数量是动态的，可以在运行时改变，可以滚动到。另一个条件是我想调整它们的大小，使 6 张图像(而且只有 6 张!)始终可见。

所以在 XAML 中:

    <ScrollViewer Name="scrollViewer1">
        <Grid Name="grid1"></Grid>
    </ScrollViewer>

然后使用 C# 我想我需要动态添加列。然后监听 scrollViewer1 的 SizeChanged 事件，我需要动态计算行和列的大小，以便始终显示 3 个图像。例如:

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

问题 #1:动态添加更多列会使网格单元格变得越来越小，并且在 ScrollViewer 中永远不会滚动，直到有 10 多个列。

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

问题:这是正确的方法吗？我应该在 ScrollViewer 中使用 Grid 吗？我必须手动计算尺寸还是有办法让它们填满容器？

Answer 1

网格宽度应计算为

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

这似乎对我有用:

XAML:

<DockPanel>
   <ListBox Width="150" DockPanel.Dock="Left" BorderBrush="AliceBlue" BorderThickness="2">
      <Button Name="AddColumn_Button" Width="100" Height="25" Content="Add Column" Click="AddColumn_Button_Click" Margin="5"/>
      <Button Name="AddRow_Button" Width="100" Height="25" Content="Add Row"  Margin="5" Click="AddRow_Button_Click" />
   </ListBox>
   <ScrollViewer Name="scrollViewer1" BorderBrush="AliceBlue" BorderThickness="2" SizeChanged="scrollViewer1_SizeChanged" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="1">
        <Grid Name="grid1" ShowGridLines="True" >
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
        </Grid>
    </ScrollViewer>
</DockPanel>

代码隐藏:

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