2021-08-16 WPF控件专题 StackPanel 控件详解

原创于 2021-08-16 08:54:34 发布 · 4.3w 阅读

0 ·

CC 4.0 BY-SA版权

WPF控件专题专栏收录该内容

31 篇文章

订阅专栏

本文介绍了StackPanel控件，这是一种用于排列元素的布局工具，支持水平或垂直排列。StackPanel会根据FlowDirection属性决定子元素的流动方向，并通过Orientation属性设置排列方式。当子元素超出容器时，超出部分将被隐藏。文中还提供了一个具体的案例，展示了如何创建一个水平排列并从右到左流动的按钮组，以说明StackPanel的用法。

在这里插入图片描述

1.StackPanel 控件介绍

堆栈面板 —布局控件 —Panel

子元素排列成一行或一列
水平垂直
FlowDirection 子元素的流动方向
Orientation：Horizontal 一行一般设置VerticalAlignment：Top Bottom Center Stretch
Vertical 一列 HorizontalAlignment Left Right Center Stretch

子元素超出部分，被隐藏
可以嵌套

排列一行或一列

经常嵌套在其他布局控件，与其他布局控件结合使用

2.具体案例

<!--排列成一行或一列  StackPanel默认排列方向：垂直：宽度 水平：高度与父窗口的高度相同-->
<!--子元素超出的部分，会被隐藏-->
<!--<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
</StackPanel>-->
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" FlowDirection="RightToLeft">
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
</StackPanel>