The WrapPanel control

WrapPanel sẽ định vị từng child control của nó bên cạnh nhau, theo chiều ngang (mặc định) hoặc theo chiều dọc, cho đến khi không còn chỗ, nơi nó sẽ chuyến đến dòng tiếp theo và sau đó tiếp tục. Sử dụng nó khi bạn muốn một danh sách các control dọc hoặc ngang tự động kết thúc khi không còn chỗ.

Khi WrapPanel sử dụng theo hướng Ngang, các điều khiển con sẽ có cùng chiều cao, dựa trên mục cao nhất. Khi WrapPanel theo hướng dọc, các điều khiển con sẽ được cung cấp cùng chiều rộng, dựa trên mục rộng nhất.

Đây là ví dụ đầu tiên, chúng tôi sẽ kiểm tra WrapPanel với hướng mặc định (Ngang):

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

Lưu ý cách tôi đặt chiều cao cụ thể trên một trong các nút ở hàng thứ hai. Trong ảnh chụp màn hình kết quả, bạn sẽ thấy rằng điều này làm cho toàn bộ hàng nút có cùng chiều cao thay vì chiều cao cần thiết, như đã thấy trên hàng đầu tiên. Bạn cũng sẽ nhận thấy rằng panel thực hiện chính xác tên gọi của nó: Nó bao bọc nội dung khi nó không thể khớp với bất kỳ nội dung nào nữa. Trong trường hợp này, nút thứ tư không thể khớp với dòng đầu tiên, vì vậy nó sẽ tự động chuyển xuống dòng tiếp theo.

Nếu bạn tạo cửa sổ, và do đó, không gian có sẵn, nhỏ hơn, bạn sẽ thấy bảng điều chỉnh ngay lập tức như thế nào:

Tất cả hành vi này cũng đúng khi bạn đặt Định hướng thành Dọc. Đây là ví dụ chính xác như trên, nhưng với một WrapPanel dọc:

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

Bạn có thể thấy cách các nút sắp xếp theo chiều dọc thay vì ngang, trước khi chúng quấn vì chúng chạm đến đáy của cửa sổ. Trong trường hợp này, tôi đã cho chiều rộng rộng hơn với nút thứ tư và bạn sẽ thấy các nút trong cùng một cột cũng có cùng chiều rộng, giống như chúng ta đã thấy với chiều cao nút trong ví dụ Ngang.

Xin lưu ý rằng mặc dù WrapPanel theo chiều ngang sẽ khớp với chiều cao trong cùng một hàng và WrapPanel theo chiều dọc sẽ khớp với chiều rộng trong cùng một cột, chiều cao không được khớp trong một WrapPanel dọc và chiều rộng không khớp với chiều ngang của WrapPanel. Hãy xem trong ví dụ này, đó là WrapPanel theo chiều dọc nhưng trong đó nút thứ tư có chiều rộng VÀ chiều cao tùy chỉnh:

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

Nó sẽ trông như thế này:

Lưu ý cách nút 5 chỉ sử dụng chiều rộng - nó không quan tâm đến chiều cao, mặc dù nó khiến nút thứ sáu bị đẩy sang cột mới.