Dockpanel

DockPanel giúp dễ dàng cập nhật nội dung theo cả bốn hướng (trên, dưới, trái và phải). Điều này làm cho nó trở thành một lựa chọn tuyệt vời trong nhiều tình huống, trong đó bạn muốn chia cửa sổ thành các khu vực cụ thể, đặc biệt vì theo mặc định thi phần tử cuối cùng bên trong DockPanel sẽ tự động lấp đầy phần còn lại của không gian (chính giữa ), trừ khi tính năng này bị vô hiệu hóa.

Như chúng ta đã thấy với nhiều kiểu panel khác trong WPF, bạn bắt đầu tận dụng các khả năng của panel bằng cách sử dụng thuộc tính đính kèm của nó, trong trường hợp này là thuộc tính DockPanel.Dock, thuộc tính này sẽ giúp bạn muốn điều khiển child control theo hướng nào bạn thích. Nếu bạn không sử dụng thuộc tính này, (các) control đầu tiên sẽ được đặt ở bên trái, với control cuối cùng chiếm không gian còn lại. Đây là một ví dụ về cách bạn sử dụng nó:

<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>

Như đã đề cập, chúng tôi không chỉ định vị trí dock cho child control cuối cùng, bởi vì nó tự động điều khiển, cho phép nó lấp đầy khoảng trống còn lại. Bạn cũng sẽ nhận thấy rằng các control xung quanh trung tâm chỉ chiếm dung lượng mà chúng cần - mọi thứ khác được dành cho vị trí trung tâm. Đó cũng là lý do tại sao bạn sẽ thấy nút Phải chiếm nhiều không gian hơn nút Trái - ký tự phụ trong văn bản chỉ cần nhiều pixel hơn.

Điều cuối cùng mà bạn có thể sẽ nhận thấy, là cách phân chia không gian. Chẳng hạn, nút Trên cùng không có được tất cả không gian trên cùng, vì nút Trái chiếm một phần của nó. DockPanel quyết định ưu tiên kiểm soát nào bằng cách xem vị trí của họ trong đánh dấu. Trong trường hợp này, nút Trái được ưu tiên vì nó được đặt đầu tiên trong đánh dấu. May mắn thay, điều này cũng có nghĩa là nó rất dễ thay đổi, như chúng ta sẽ thấy trong ví dụ tiếp theo, nơi chúng ta cũng đã làm phẳng không gian một chút bằng cách gán chiều rộng / chiều cao cho các child control:

<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>

Các control trên cùng và dưới cùng hiện được ưu tiên hơn các control bên trái và bên phải và tất cả chúng đều chiếm 50 pixel về chiều cao hoặc chiều rộng. Nếu bạn làm cho cửa sổ lớn hơn hoặc nhỏ hơn, bạn cũng sẽ thấy rằng chiều rộng / chiều cao tĩnh này vẫn giữ nguyên cho dù thế nào - chỉ khu vực trung tâm tăng hoặc giảm kích thước khi bạn thay đổi kích thước cửa sổ.

Thuộc tính LastChildFill

Như đã đề cập, hành vi mặc định là lớp con cuối cùng của DockPanel chiếm phần còn lại của không gian, nhưng điều này có thể bị vô hiệu hóa bằng LastChildFill. Đây là một ví dụ nơi chúng tôi vô hiệu hóa nó, đồng thời chúng tôi sẽ cho thấy khả năng gắn nhiều hơn một điều khiển vào cùng một phía:

<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>

Trong ví dụ này, chúng tôi gắn hai control sang trái và hai điều khiển sang phải và đồng thời, chúng tôi tắt thuộc tính LastChildFill. Điều này khiến chúng ta có không gian trống ở trung tâm, có thể thích hợp hơn trong một số trường hợp.