StackPanel 控件

StackPanel 将子元素放置在垂直和水平堆叠中。StackPanel 是最常用的面板。StackPanel 也被称为简单面板。StackPanel 的子元素在垂直方向上从上到下增长。

我们将使用 HorizontalAlignment 或 VerticalAlignment 放置子元素，并通过使用 Margin 和 Padding 属性进行间距。

现在我们将使用 StackPanel 创建布局。

现在我们将编写一段代码，通过该代码我们将向 StackPanel 添加一个文本框和 5 个按钮。默认情况下，StackPanel 将从上到下排列元素。

StackPanel 中包含的所有元素都将自身拉伸到 StackPanel 的全部宽度。

MainWindow.XAML

StackPanel 的输出显示在下面的截图

输出

示例 2： 在这里，我们将举 StackPanel 的另一个例子，我们将水平放置 StackPanel 中的元素。

在这里，我们将在将 orientation 属性设置为 horizontal 之后水平排列 StackPanel 的子元素。这次，子元素将自身拉伸到 StackPanel 的高度。

为此，我们将编写以下代码

MainWindow.XAML

以下是上述代码的输出

输出

示例 3： 现在我们将更改 StackPanel 的 FlowDirection 属性。

现在我们将设置 StackPanel 的 FlowDirection 属性为 RightToLeft 以及水平方向。现在从右到左堆叠子元素。

为此，我们将编写以下代码以从右到左水平设置子元素的元素。

MainWindow.XAML

上述代码的输出显示在下面的截图

输出

示例 4： 现在，我们将更改 StackPanel 中子元素的 HorizontalAlignment 属性。

默认情况下，HorizontalAlignment 属性将元素拉伸到 StackPanel 的宽度。因此，子元素将自身拉伸到 StackPanel 的全部宽度。我们可以将 HorizontalAlignment 更改为 Right、Left、Center 或 Stretch。

为此，我们将编写以下代码

MainWindow.XAML

上述代码的输出如下面的截图所示

输出

示例 5： 现在我们将更改 StackPanel 中子元素的垂直对齐属性以及水平方向。

为了排列 verticalAlignment 中的元素，我们将编写以下代码

MainWindow.XAML

输出

示例 6：在这里，我们将举 StackPanel 的另一个例子，即嵌套 StackPanel。

当我们在 StackPanel 中使用 StackPanel 时，我们称 StackPanel 为嵌套 Stack Panel。

在这里，我们将以 NestedStack Panel 为例，我们将外部 StackPanel 的方向设置为垂直（这是默认方向），内部 StackPanel 的方向设置为水平，HorizontalAlignment 设置为中心。

在这里，我们将为NestedStackPanel编写以下代码：

MainWindow.XAML

NestedStackPanel 的输出显示在下面的截图

输出

总结

正如我们上面看到的，我们已经指定了 StackPanel 的所有功能。元素的对齐是通过使用对齐属性在右侧、左侧、上方、下方完成的，使用 StackPanel。