Question

在html中我可以创建一个div并用float位置的图像填充它：

<div style="width: 560px; height: 560px;">
    <img src="myurl" style="width: 100px; height: 100px; float: left;" />
    <img src="myurl" style="width: 100px; height: 100px; float: left;" />
    <img src="myurl" style="width: 100px; height: 100px; float: left;" />
    ...
</div>

我正在尝试在WPF中执行相同操作：

首先我尝试使用StackPanel：

<StackPanel>
    <Image Source="myurl" Width="100" Height="100" />
    <Image Source="myurl" Width="100" Height="100" />
    ...
</StackPanel>

似乎没有成功，这个组件只是在一个方向上堆叠对象。

接下来我尝试使用ListView：

<ListView Background="#5a5a5a">
    <ListViewItem Width="100" Height="100">
        <Image Source="myurl" Width="100" Height="100" />
    </ListViewItem>
    <ListViewItem Width="100" Height="100">
        <Image Source="myurl" Width="100" Height="100" />
    </ListViewItem>
</ListView>

但所有图像都留在中心。

如何使用WPF对html float产生相同的效果？

Answer 1

我认为您正在寻找WrapPanel class。来自MSDN：

将子元素从左到右排列在顺序位置，将内容分解到包含框边缘的下一行。后续排序从上到下或从右到左依次发生，具体取决于Orientation属性的值。

包装面板类似于StackPanel，但它不只是将所有子元素堆叠到一行，如果没有剩余空间，它将它们包装到新行。方向可以设置为水平或垂直。

WrapPanel可用于排列选项卡控件的选项卡，工具栏中的菜单项或Windows资源管理器列表中的项目。 WrapPanel通常与相同尺寸的物品一起使用，但不是必需的。（Source）

在WPF中放置像Html Float资源的图像

1 个答案: