wpf之StackPanel - 技术栈

前言

StackPanel是WPF 中的布局容器之一，它的核心功能是将其子元素按水平或者垂直方向进行排列。

1、Orientation

该属性指定StackPanel中元素的排列方式，是水平排列还是垂直排列。

1）Vertical

元素垂直方向紧凑排列。

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical"    >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 2" />
    </StackPanel>
</Window>

2）Horizontal

元素水平方向紧凑排列。

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal"     >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 2" />
    </StackPanel>
</Window>

2、HorizontalAlignment

该属性指定元素水平方向上的对齐方式

1）Left

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical"       HorizontalAlignment="Left"                   >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 2" />
    </StackPanel>
</Window>

2）Right

3）Center

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical"       HorizontalAlignment="Center"                     >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 2" />
    </StackPanel>
</Window>

4）Stretch

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical"       HorizontalAlignment="Stretch"                      >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 2" />
    </StackPanel>
</Window>

3、VerticalAlignment

该属性指定元素垂直方向上的对齐方式

1）Top

2）Bottom

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal"        VerticalAlignment ="Bottom"    >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 3" />
    </StackPanel>
</Window>

3）Center

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal"        VerticalAlignment ="Center"    >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 3" />
    </StackPanel>
</Window>

4）Stretch

csharp 复制代码

<Window x:Class="wpf之StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal"        VerticalAlignment ="Stretch"     >
        <TextBlock  Background="Red"  Text=" 1" />
        <TextBlock  Background="Blue"  Text=" 2" />
        <TextBlock  Background="Green"  Text=" 3" />
    </StackPanel>
</Window>

马工撰写的年入30万+C#上位机项目实战必备教程（点击下方链接即可访问文章目录）

1、《C#串口通信从入门到精通》

2、《C#与PLC通信从入门到精通》

3、《C# Modbus通信从入门到精通》

4、《C#Socket通信从入门到精通》

5、《C# MES通信从入门到精通》

6、《winform控件从入门到精通》

7、《C#操作MySql数据库从入门到精通》