Question

我有一个填充ObservableCollection的方法。这个ObservableCollection绑定到我的XAML，它出现在屏幕上。然而，目前它只是向下延伸，一个接一个的图像如下： As you can see, after 3 images, it displays no more and cuts off the image halfway through.

我希望图像以网格方式显示，例如，每行5个，允许用户向下滚动。我怎么能做到这一点？我想要的一个例子：

From Google images. With a static number of images this is easy to accomplish, with a binding to an ObservableCollectiout, however, I am lost.

据我了解，它可能不被视为“Metro”/“Windows 8 app风格”向下延伸，如果是这样，我将如何模拟图像中显示的功能，以便溢出延伸到右侧，允许你继续向右滚动吗？

我的代码：

    <ItemsControl ItemsSource="{Binding Path=listOfImages}"
      HorizontalContentAlignment="Stretch">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel VerticalAlignment="Center">
                        <Image x:Name="images" Source="{Binding}" Visibility="Visible" Stretch="Fill" Width="200" Height="200"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

更新：

我现在添加了一个WrapGrid，但它仍然渲染不正确，如下所示：

I have now added a WrapGrid, but it is still rendering incorrectly, like so

以下是我正在使用的代码：

  <ItemsControl ItemsSource="{Binding Path=listOfImages}" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="5"
              HorizontalContentAlignment="Stretch">
                    <ListView Height="Auto" Width="Auto">
                            <ItemsPanelTemplate>
                                <WrapGrid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Center" Orientation="Horizontal">
                                    <Image x:Name="images" Source="{Binding}" Visibility="Visible" Stretch="Fill" Width="200" Height="200"/>
                                </WrapGrid>
                            </ItemsPanelTemplate>
                    </ListView>
                </ItemsControl>

我在这里误解了什么？非常感谢。

更新：

简单代码：

 <ItemsControl ItemsSource="{Binding Path=listOfImages}">
                                <WrapGrid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Center" Orientation="Horizontal">
                                    <Image x:Name="images" Source="{Binding}" Visibility="Visible" Stretch="Fill" Width="200" Height="200"/>
                                </WrapGrid>
                  </ItemsControl>

Answer 1

您可以WrapPanel使用Orientation设置为Orientation.Vertical。

像这样，它将首先填充第一列，溢出到第二列，依此类推，向右延伸。

另见文件：

如果Orientation属性设置为Horizontal，则子内容首先形成水平行，如果需要，形成垂直堆栈行。如果Orientation属性设置为Vertical，则子内容首先位于垂直列中，如果空间不足，则会进行换行并添加水平维度中的其他列。

你使用的WrapGrid有点奇怪。看起来你必须这样使用它：

<ItemsControl ItemsSource="{Binding Path=listOfImages}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid VerticalAlignment="Center" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Visibility="Visible" Stretch="Fill" Width="200" Height="200"
                   Source="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

使ObservableCollection图像在屏幕上显示良好

1 个答案: