WPF布局控件之StackPanel布局

最新推荐文章于 2025-06-29 15:28:47 发布

落笔生花_花

最新推荐文章于 2025-06-29 15:28:47 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_36819973/article/details/127818830

.net 同时被 2 个专栏收录

31 篇文章

订阅专栏

.net core

25 篇文章

订阅专栏

本文详细介绍了Windows中的StackPanel控件，探讨了Orientation、Background、HorizontalAlignment和VerticalAlignment属性的使用示例，帮助开发者理解如何实现不同排列和对齐效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

博主文章仅用于学习、研究和交流目的，不足和错误之处在所难免，希望大家能够批评指出，博主核实后马上更改。

概述：

StackPanel可以把内部的元素在纵向或者横向的排列。

名称	说明
Grid	网格，根据自定义行和列来设置控件的布局
StackPanel	栈式面板，包含的元素在竖直或水平方向排成一条直线
WrapPanel	自动折行面板，包含的元素在排满一行后，自动换行
DockPanel	泊靠式面板，内部的元素可以选择泊靠方向
UniformGrid	网格,UniformGrid就是Grid的简化版，每个单元格的大小相同。
Canvas	画布，内部元素根据像素为单位绝对坐标进行定位
Border	装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件

一、StackPanel

常用属性	数据类型	可选值	说明
Orientation	Orientation	Horizontal（水平排列）\Vertical(垂直排列)	决定内部元素是水平还是垂直排列，默认值（Vertical）
Background	Brush	背景色(Red/Yellow等等)
HorizontalAlignment	HorizontalAlignment	Center（中心）/Left（靠左）/Right（靠右）/Stretch（拉伸以填充父元素）	决定内部元素在水平方向的对齐方式
VerticalAlignment	VerticalAlignment	Top（上方）/Center（中心）/Bottom（下方）/Stretch（拉伸以填充父元素）	决定内部元素在垂直方向的对齐方式

Orientation属性演示

代码如下（水平排列）:

 <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Width" Value="100" ></Setter>
        </Style>
    </Window.Resources>
    <Grid >
        <StackPanel Orientation="Horizontal">
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
        </StackPanel>
    </Grid>

效果图如下

在这里插入图片描述

代码如下（垂直排列）:

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Height" Value="100" ></Setter>
        </Style>
    </Window.Resources>
    <Grid >
        <StackPanel>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
        </StackPanel>
    </Grid>

效果图如下

在这里插入图片描述

Background属性演示

代码如下

     <StackPanel  Background="Red">
         
        </StackPanel>

效果如下

在这里插入图片描述

HorizontalAlignment属性演示

代码如下（水平靠右）其他同理

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Height" Value="100" ></Setter>
        </Style>
    </Window.Resources>
    <Grid >
        <StackPanel HorizontalAlignment="Right">
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
        </StackPanel>
    </Grid>

效果图如下

在这里插入图片描述

VerticalAlignment属性演示

代码如下（垂直向下）其他同理

   <Grid >
        <StackPanel VerticalAlignment="Bottom">
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
            <Button>zhangsan</Button>
        </StackPanel>
    </Grid>