StackPanel

StackPanel rất giống với WrapPanel, nhưng có ít nhất một điểm khác biệt quan trọng: StackPanel không bao bọc nội dung. Thay vào đó, nó kéo dài nội dung theo một hướng, cho phép bạn xếp chồng item sau và item trước lên nhau. Trước tiên chúng ta hãy thử một ví dụ rất đơn giản, giống như chúng ta đã làm với WrapPanel:

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

Điều đầu tiên bạn cần chú ý là làm thế nào StackPanel không thực sự quan tâm liệu có đủ chỗ cho nội dung hay không. Nó không bao bọc nội dung theo bất kỳ cách nào và nó không tự động cung cấp cho bạn khả năng cuộn (bạn có thể sử dụng điều khiển ScrollViewer cho điều đó - chi tiết về điều đó sẽ có trong chương sau).

Bạn cũng có thể nhận thấy rằng hướng mặc định của StackPanel là Dọc, không giống như WrapPanel với hướng mặc định là Ngang. Nhưng cũng giống như đối với WrapPanel, điều này có thể dễ dàng thay đổi, bằng cách sử dụng thuộc tính Orientation:

<StackPanel Orientation="Horizontal">

Một điều khác mà bạn có thể sẽ nhận thấy là StackPanel mở rộng child control của nó theo mặc định. Trên một StackPanel được sắp xếp theo chiều dọc, giống như trong ví dụ đầu tiên, tất cả các điều khiển con được kéo dài theo chiều ngang. Trên StackPanel được sắp xếp theo chiều ngang, tất cả các điều khiển con được kéo dài theo chiều dọc, như đã thấy ở trên. StackPanel thực hiện điều này bằng cách đặt thuộc tính HorizontalAlignment hoặc VerticalAlignment trên các child control của nó thành Stretch, nhưng bạn có thể dễ dàng ghi đè lên điều này nếu bạn muốn. Hãy xem ví dụ tiếp theo, trong đó chúng ta sử dụng cùng một đánh dấu như chúng ta đã làm trong ví dụ trước, nhưng lần này chúng ta gán các giá trị cho thuộc tính VerticalAlignment cho tất cả các điều khiển con:

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
	<StackPanel Orientation="Horizontal">
		<Button VerticalAlignment="Top">Button 1</Button>
		<Button VerticalAlignment="Center">Button 2</Button>
		<Button VerticalAlignment="Bottom">Button 3</Button>
		<Button VerticalAlignment="Bottom">Button 4</Button>
		<Button VerticalAlignment="Center">Button 5</Button>
		<Button VerticalAlignment="Top">Button 6</Button>
	</StackPanel>
</Window>

Chúng tôi sử dụng các giá trị Top, Center và bottom để đặt các nút theo một mẫu đẹp mặt, chỉ để đá. Tất nhiên, điều tương tự cũng có thể được thực hiện đối với StackPanel được sắp xếp theo chiều dọc, trong đó bạn sẽ sử dụng HorizontalAlignment trên các child control:

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
	<StackPanel Orientation="Vertical">
		<Button HorizontalAlignment="Left">Button 1</Button>
		<Button HorizontalAlignment="Center">Button 2</Button>
		<Button HorizontalAlignment="Right">Button 3</Button>
		<Button HorizontalAlignment="Right">Button 4</Button>
		<Button HorizontalAlignment="Center">Button 5</Button>
		<Button HorizontalAlignment="Left">Button 6</Button>
	</StackPanel>
</Window>

Như bạn có thể thấy, các control vẫn đi từ trên xuống dưới, nhưng thay vì có cùng chiều rộng, mỗi điều khiển được căn chỉnh sang trái, phải hoặc ở giữa.