2

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

小样

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

所以在 XAML 中：

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

然后使用 C# 我想我需要动态添加列。然后听scrollViewer1's SizeChangedevent 我需要动态计算行和列的大小，以便始终显示 3 张图像。例如：

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

问题#1：动态添加更多列使网格单元格越来越小，并且在超过ScrollViewer10 列之前永远不会在其中滚动。

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

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

4

1 回答 1

2

网格宽度应计算为

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;        
    }
于 2013-07-11T20:23:03.403 回答