WPF 布局

StackPanel

• Orientation
  • Horizontal 使区域内元素水平对齐，每个元素占一列且居中
  • Vertical （默认） 使区域内元素垂直对齐,每个元素占一行且居中

Vertical 或者 默认

<StackPanel>
    <Button Width="100" Height="40">HH</Button>
    <Button Width="100" Height="40">HH</Button>
    <Button Width="100" Height="40">HH</Button>
    <Button Width="100" Height="40">HH</Button>
</StackPanel>

Horizontal

<StackPanel Orientation="Horizontal">
    <Button Width="100" Height="40">HH</Button>
    <Button Width="100" Height="40">HH</Button>
    <Button Width="100" Height="40">HH</Button>
    <Button Width="100" Height="40">HH</Button>
</StackPanel>

WrapPanel

区域内元素超出宽度自动换行

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="300">
    <Grid>
        <WrapPanel Orientation="Horizontal">
            <Button Width="100" Height="40">HH</Button>
            <Button Width="100" Height="40">HH</Button>
            <Button Width="100" Height="40">HH</Button>
            <Button Width="100" Height="40">HH</Button>
        </WrapPanel>
    </Grid>
</Window>

DockPanel

支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。
DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。Dock 没有Fill值。作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，除非DockPanel的LastChildFill属性为false，它将朝某个方向停靠。

占用优先级是根据元素的顺序来排列的

<DockPanel LastChildFill="False">
    <Button DockPanel.Dock="Top" Background="Aqua">1(Top)</Button>
    <Button DockPanel.Dock="Left" Background="Green">2(Left)</Button>
    <Button DockPanel.Dock="Right" Background="Yellow">3(Right)</Button>
    <Button DockPanel.Dock="Bottom" Background="Blue">4(Bottom)</Button>
</DockPanel>

Grid
类似于Table 主要是定义行和列

定义一个2行3列并在1行0列放入Border元素，可以给行或者列设定高度宽度

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Border Grid.Row="1" Grid.Column="0" Background="Red"></Border>
</Grid>