Question

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

mockup

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

所以在XAML：

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

然后使用C＃我想我需要动态添加列。然后听取scrollViewer1的{{1}}事件，我需要动态计算行和列的大小，以便始终查看3个图像。例如：

SizeChanged

问题＃1：动态添加更多列会使网格单元变得越来越小，永远不会在ColumnDefinition gridColN = new ColumnDefinition(); grid1.ColumnDefinitions.Add(gridColN);内滚动，直到有10列以上。

预期结果：最终结果应该是一个水平的图像流，一次可见，这将在调整外部容器或窗口大小时调整大小。我试图动态调整其宽度，但将它们设置为容器宽度的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;        
    }

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

1 个答案: