WPF 入门教程DockPanel介绍

2024-01-10 21:10:10

在DockPanel中可以很容易地停靠在所有四个方向的内容（上，下，左，右）。这使它在许多情况下成为一个很好的选择，您希望将窗口划分为特定区域，特别是因为默认情况下，DockPanel 内的最后一个元素，除非此功能被明确禁用，否则将自动填充其余空间（中心）。

我们在 WPF 中的许多其他面板中看到的那样，您可以通过使用面板的附加属性开始利用面板的可能性，在本例中为 DockPanel.Dock 属性，它决定了您希望子控件朝哪个方向移动停靠到。如果您不使用它，第一个控件将停靠在左侧，最后一个占用剩余空间。

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Left">Left</Button>
		<Button DockPanel.Dock="Top">Top</Button>
		<Button DockPanel.Dock="Right">Right</Button>
		<Button DockPanel.Dock="Bottom">Bottom</Button>
		<Button>Center</Button>
	</DockPanel>
</Window>

正如已经提到的，我们没有为最后一个孩子分配停靠位置，因为它会自动将控件居中，让它填充剩余的空间。您还会注意到中心周围的控件仅占用它们所需的空间量 - 其他一切都留给中心位置。这也是为什么您会看到右按钮比左按钮占用更多空间的原因 - 文本中的额外字符只需要更多像素。

您可能会注意到的最后一件事是空间的划分方式。例如，顶部按钮不会获得所有顶部空间，因为左侧按钮占据了它的一部分。DockPanel 通过查看它们在标记中的位置来决定支持哪个控件。在这种情况下，Left 按钮优先，因为它位于标记中的第一个位置。幸运的是，这也意味着它很容易改变，正如我们将在下一个例子中看到的，我们还通过为子控件分配宽度/高度来稍微平衡空间：

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>	
		<Button>Center</Button>
	</DockPanel>
</Window>

顶部和底部控件现在优先于左侧和右侧控件，并且它们在高度或宽度上都占用 50 像素。如果您使窗口变大或变小，您还会看到无论发生什么情况，此静态宽度/高度都保持不变 - 调整窗口大小时，只有中心区域的大小会增加或减少。

最后一个子元素填充

如上面所述，默认行为是 DockPanel 的最后一个子项占用其余空间，但这可以使用 LastChildFill 禁用。这是我们禁用它的示例，同时我们将展示将多个控件停靠在同一侧的能力：

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
	<DockPanel LastChildFill="False">
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
	</DockPanel>
</Window>

在此示例中，我们将两个控件停靠在左侧，将两个控件停靠在右侧，同时关闭 LastChildFill 属性。这给我们留下了中心的空白空间，这在某些情况下可能更可取。

最后一个子元素填充

相关文章