c# - 使图像的 ObservableCollection 在屏幕上显示得很好

Question

我有一个填充 ObservableCollection 的方法。这个 ObservableCollection 绑定到我的 XAML，并出现在屏幕上。然而，目前它只是向下延伸，一个接一个的图像，如下所示：

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

据我了解，向下扩展可能不被视为“Metro”/“Windows 8 应用程序样式”，如果是这样，我将如何模拟图像中显示的功能，以便溢出向右延伸，让您继续向右滚动？

我目前的代码：

    <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，但它仍然呈现不正确，如下所示：

这是我正在使用的代码：

  <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

您可以将 aWrapPanel与Orientationset to 一起使用Orientation.Vertical。

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

另请参阅文档：

如果 Orientation 属性设置为 Horizo​​ntal，则子内容首先形成水平行，如有必要，形成垂直的行堆栈。如果将 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>