布局在一个ScrollViewer中使用的图像的动态网格 [英] Layout to use for dynamic grid of images in a ScrollViewer

问题描述

我有一个的ScrollViewer 包含电网图像。我不知道，如果使用网格是正确的选择。这里是什么，我希望它看起来像一个样机图片：

I have a ScrollViewer that contains a Grid of images. I am not sure if using a grid is the correct choice. Here is a mockup image of what I want it to look like:

红色框代表了的ScrollViewer 。里面，是的部分的布局容器的类型（电网的时刻），有图像的两行（绿色方块），而是一个动态的量可以在运行时更改列，可滚动到。另一个条件是，我要调整它们的大小，使6幅图像（！只有6）始终可见

The red box represents the ScrollViewer. Inside it, is some type of layout container (Grid at the moment) that has two rows of images (green squares) but a dynamic amount of columns that can change at runtime, that can be scrolled to. Another condition is that I want to resize them so that 6 images (and only 6!) are always visible.

因此，在XAML：

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

然后，使用C＃我想我需要动态地添加列。然后听 scrollViewer1 的时，SizeChanged 事件我需要动态计算的行和列的大小，以便拍摄3张照片总是图。例如：

Then using C# I think I need to dynamically add columns. Then listening to scrollViewer1's SizeChanged event I need to dynamically calculate the size of the rows and columns so that 3 images are always in view. For example:

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

问题1：动态添加更多的列，使网格不断得到小和内从未滚动的ScrollViewer ，直到有10+列

Problem #1: Dynamically adding more columns makes the grid cells keep getting smaller and smaller and never scroll within the ScrollViewer until there are 10+ columns.

预期结果： 最终的结果应该是图像的水平流，一次6可见，当outter容器或调整窗口的大小，将调整。 。我想他们的大小动态宽，但将它们设置为容器的宽度不能正常工作1/3

Expected result: The end result should be a horizontal stream of images, 6 visible at a time, that will resize when the outter container or window is resized. I am trying to size their width dynamically, but setting them to 1/3 of the containers width does not work.

问题：这是正确的做法？我应该使用电网中的的ScrollViewer ？我必须手动计算大小或是否有办法让他们填充容器？

Questions: Is this the correct approach? Should I use Grid inside the ScrollViewer? Do I have to manually calculate the sizes or is there a way to let them fill the container?

推荐答案

格宽度应计算为

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>

后面的代码：

CODE BEHIND:

    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中使用的图像的动态网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！