C# WPF入门学习主线篇（十三）—

C# WPF入门学习主线篇（十三）—— StackPanel布局容器

欢迎来到C# WPF入门学习系列的第十三篇。在前一篇文章中，我们探讨了 Canvas 布局容器及其使用方法。本篇博客将介绍另一种常用的布局容器——StackPanel。通过本文，您将学习如何使用 StackPanel 来垂直或水平排列子控件，并了解 StackPanel 的常见属性和应用场景。

什么是StackPanel布局容器？

StackPanel 是WPF中的一种布局容器，用于将子控件按照水平或垂直方向堆叠排列。StackPanel 使得控件布局更加简洁和直观，尤其适用于需要简单顺序排列的场景。

StackPanel的常见属性

StackPanel 有几个重要的属性，可以帮助开发者灵活地控制子控件的排列方式：

Orientation: 控制子控件的堆叠方向，取值为 Horizontal（水平）或 Vertical（垂直）。默认值为 Vertical。
HorizontalAlignment: 控制 StackPanel 本身在其父容器中的水平对齐方式，取值为 Left、Center、Right 和 Stretch。
VerticalAlignment: 控制 StackPanel 本身在其父容器中的垂直对齐方式，取值为 Top、Center、Bottom 和 Stretch。
Margin: 设置 StackPanel 的外边距。
Padding: 设置 StackPanel 的内边距。

使用StackPanel布局容器的示例

垂直堆叠示例

以下是一个简单的XAML代码示例，展示了如何使用 StackPanel 垂直堆叠几个按钮：

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="StackPanel Vertical Example" Height="350" Width="525"><Grid><!-- 定义一个 StackPanel 布局容器，垂直堆叠 --><StackPanel Orientation="Vertical" Background="LightBlue" Margin="10"><!-- 在 StackPanel 中放置几个按钮，自动垂直堆叠 --><Button Content="Button 1" Width="100" Height="30" Margin="5"/><Button Content="Button 2" Width="100" Height="30" Margin="5"/><Button Content="Button 3" Width="100" Height="30" Margin="5"/></StackPanel></Grid>
</Window>

水平堆叠示例

以下是一个简单的XAML代码示例，展示了如何使用 StackPanel 水平排列几个按钮：

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="StackPanel Horizontal Example" Height="350" Width="525"><Grid><!-- 定义一个 StackPanel 布局容器，水平排列 --><StackPanel Orientation="Horizontal" Background="LightGreen" Margin="10"><!-- 在 StackPanel 中放置几个按钮，自动水平排列 --><Button Content="Button A" Width="100" Height="30" Margin="5"/><Button Content="Button B" Width="100" Height="30" Margin="5"/><Button Content="Button C" Width="100" Height="30" Margin="5"/></StackPanel></Grid>
</Window>

后台代码示例

在后台代码中，您可以动态设置或修改子控件在 StackPanel 中的排列方式：

using System.Windows;
using System.Windows.Controls;namespace WpfApp
{public partial class MainWindow : Window{public MainWindow(){InitializeComponent();// 动态创建一个 StackPanel 并设置其属性StackPanel dynamicStackPanel = new StackPanel{Orientation = Orientation.Horizontal,Background = new SolidColorBrush(Colors.LightCoral),Margin = new Thickness(10)};// 动态创建几个按钮并添加到 StackPanelButton button1 = new Button { Content = "Dynamic Button 1", Width = 100, Height = 30, Margin = new Thickness(5) };Button button2 = new Button { Content = "Dynamic Button 2", Width = 100, Height = 30, Margin = new Thickness(5) };Button button3 = new Button { Content = "Dynamic Button 3", Width = 100, Height = 30, Margin = new Thickness(5) };dynamicStackPanel.Children.Add(button1);dynamicStackPanel.Children.Add(button2);dynamicStackPanel.Children.Add(button3);// 将动态创建的 StackPanel 添加到 Gridthis.Content = dynamicStackPanel;}}
}