WPF 入门教程WrapPanel介绍「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

WrapPanel将定位每个子控件的旁边，另外，水平方向（默认值）或垂直，直到没有更多的空间，在那里将换到下一行，然后继续。当您想要一个垂直或水平列表控件在没有更多空间时自动换行时使用它。

当 WrapPanel 使用 Horizo​​ntal 方向时，子控件将

被赋予相同的高度，基于最高的项目。当 WrapPanel 为垂直方向时，子控件将被赋予相同的宽度，基于最宽的项目。

在第一个示例中，我们将检查具有默认（水平）方向的 WrapPanel：

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="300" Width="300">
	<WrapPanel>
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Height="40">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

请注意我如何在第二行中的一个按钮上设置特定高度。在生成的屏幕截图中，您将看到这会导致整行按钮具有相同的高度，而不是所需的高度，如第一行所示。您还会注意到面板的功能正如其名称所暗示的那样：当内容无法容纳更多内容时，它会包装内容。在这种情况下，第四个按钮无法放入第一行，因此它会自动换行到下一行。

如果您将窗口缩小，从而使可用空间变小，您将看到面板如何立即适应它：

当您将方向设置为垂直时，所有这些行为也是如此。这是与之前完全相同的示例，但使用 Vertical WrapPanel：

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="120" Width="300">
	<WrapPanel Orientation="Vertical">
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Width="140">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

您可以看到按钮是如何垂直而不是水平的，因为它们到达窗口底部而环绕。在本例中，我为第四个按钮设置了更宽的宽度，您将看到同一列中的按钮也具有相同的宽度，就像我们在水平示例中看到的按钮高度一样。

请注意，虽然 Horizo​​ntal WrapPanel 将匹配同一行中的高度，而 Vertical WrapPanel 将匹配同一列中的宽度，但 Vertical WrapPanel 中的高度不匹配，Horizo​​ntal WrapPanel 中的宽度不匹配。看看这个例子，它是 Vertical WrapPanel 但第四个按钮获得自定义宽度和高度：

<Button Width="140" Height="44">Test button 4</Button>

它看起来像这样：