WPF 入门教程DockPanel介绍

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>

WPF 入门教程DockPanel介绍

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

您可能会注意到的最后一件事是空间的划分方式。例如,顶部按钮不会获​​得所有顶部空间,因为左侧按钮占据了它的一部分。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>

WPF 入门教程DockPanel介绍

顶部和底部控件现在优先于左侧和右侧控件,并且它们在高度或宽度上都占用 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>

WPF 入门教程DockPanel介绍

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

上一篇:Wpf 异步方法更新进度条


下一篇:C#及WPF多线程定义和使用