WPF布局控件之StackPanel布局

前言

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

概述：

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>

效果图如下

总结

在实际工作中，我们可以使用Orientation、HorizontalAlignment、VerticalAlignment 这三个属性组合各种排列和对齐方式。