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

Question

我有一个填充 ObservableCollection 的方法。此 ObservableCollection 绑定(bind)到我的 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

您可以将 WrapPanel 与 Orientation 一起使用设置为 Orientation.Vertical。

这样它会先填充第一列，溢出到第二列以此类推，向右延伸。

另请参阅文档:

If the Orientation property is set to Horizontal, child content forms horizontal rows first and if necessary forms vertical stacks of rows. If the Orientation property is set to Vertical, child content is first positioned in a vertical column, and if there is not enough space, wrapping occurs and additional columns in the horizontal dimension are added.

---

您使用的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>