我有一个方法来填充一个可观察的集合。这个可观察集合绑定到我的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>

更新:
我现在已经添加了一个wrappgrid,但它仍然渲染错误,如下所示:
下面是我使用的代码:
  <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>

最佳答案

您可以使用WrapPanel并将Orientation设置为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>

10-07 16:38
查看更多