使 ObservableCollection 的图像在屏幕上显示得很好答案

【问题标题】：Making ObservableCollection of images appear nicely on screen使 ObservableCollection 的图像在屏幕上显示得很好
【发布时间】：2013-01-11 12:27:59
【问题描述】：

我有一个填充 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>

【问题讨论】：

标签： c# windows xaml microsoft-metro

【解决方案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>

【讨论】：

非常感谢您的回复。我试图实现这一点，但遇到了问题。我已经更新了我的问题以反映这一点。再次感谢:)
这看起来很不对劲。当你应该只使用 WrapPanel 时，为什么要将 ListView 嵌套在 ItemsControl 中？
我已更新以显示我现在使用的代码，但它返回错误消息：“WrapGrid 只能用于显示 ItemsControl 中的项目。”......这没有任何意义我:)