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