WPF布局控件之StackPanel布局

前言

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

概述：

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

一、StackPanel

Orientation属性演示

代码如下（水平排列）:

 <Window.Resources>
        <Style TargetType="{x:Type Button}">
            "Width" Value="100" >
        Style>
    Window.Resources>
    <Grid >
        <StackPanel Orientation="Horizontal">
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
        StackPanel>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图如下

代码如下（垂直排列）:

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            "Height" Value="100" >
        Style>
    Window.Resources>
    <Grid >
        <StackPanel>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
        StackPanel>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图如下

Background属性演示

代码如下

     <StackPanel  Background="Red">
         
        StackPanel>
1
2
3

效果如下

HorizontalAlignment属性演示

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

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            "Height" Value="100" >
        Style>
    Window.Resources>
    <Grid >
        <StackPanel HorizontalAlignment="Right">
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
        StackPanel>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图如下

VerticalAlignment属性演示

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

   <Grid >
        <StackPanel VerticalAlignment="Bottom">
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
            <Button>zhangsanButton>
        StackPanel>
    Grid>
1
2
3
4
5
6
7
8

效果图如下

总结

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