WPF的布局控件：Grid，StackPanel，DockPanl，Canvas，WrapPanel， UniformGrid

WPF中的基本控制面板类控件都是从 Panel 类中派生出来的， Panel 本身是 UIElement。Panel(Abstract)排成出来的排版控件：

StackPanel
WrapPanel
UniformGrid
DockPanel
Grid
Canvas

链接：https://zhuanlan.zhihu.com/p/357897287

一、Grid表格式面板

1）Grid 将 UI 按表格式进行排列，需要自定义排列规则。

作者：WEI
链接：https://zhuanlan.zhihu.com/p/357897287
<Grid><Grid.RowDefinitions>  //RowDefinitions 设置行<RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions> //ColumnDefinitions 设置列<ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Rectangle Grid.Row="0" Grid.Column="0" Fill="White" /> //Row 的值表示行坐标<Rectangle Grid.Row="1" Grid.Column="0" Fill="Black" /> //Column 的值表示列坐标<Rectangle Grid.Row="2" Grid.Column="0" Fill="Blue"  /><Rectangle Grid.Row="0" Grid.Column="1" Fill="Red"   /><Rectangle Grid.Row="0" Grid.Column="2" Fill="Yellow"/><Rectangle Grid.Row="1" Grid.Column="1" Fill="Green" /><Rectangle Grid.Row="1" Grid.Column="2" Fill="Orange"/><Rectangle Grid.Row="2" Grid.Column="1" Fill="Pink"  /><Rectangle Grid.Row="2" Grid.Column="2" Fill="violet"/></Grid>

Grid 类中含有行容器 (RowDefinitions) 和列容器 (ColumnDefinitions)。RowDefinitions 设置行，Row 的值表示行坐标，ColumnDefinitions 设置列，Column 的值表示列坐标。

2）设定 Grid 行或列的尺寸

Grid 调整 Grid 行列尺寸的方法有如下三种：
绝对尺寸，把 Grid 行列大小尺寸设为一个数值，Grid 的行列尺寸就不会随着其中 UI 的大小进行自动调整。
自动尺寸，把 Grid 的 Height 和 Width 设为 Auto 。Grid 中的 UI 会自动调整其行列的高度或宽度。
按比例分割行列尺寸，把有限的平面大小按照一定的比例划分宽高比，其比例的数值可以是浮点数。

<Grid><Grid.RowDefinitions><RowDefinition Height="50"/>  //绝对尺寸<RowDefinition Height="1*"/> //按比例尺寸<RowDefinition Height="Auto" MinHeight="20"/> //自动尺寸,如果控件中无内容，就会被压缩成0，所以这里设置一个最少值</Grid.RowDefinitions><Rectangle Grid.Row="0" Fill="LightBlue"/><Rectangle Grid.Row="1" Fill="LightGreen"/><Rectangle Grid.Row="2" Fill="LightCoral"/></Grid>

3）元素跨行设置 (RowSpan/ColumnSpan)
RowSpan（跨行设置）

ColumnSpan（跨列设置）

作者：WEI
链接：https://zhuanlan.zhihu.com/p/357897287
<Grid><Grid.RowDefinitions><RowDefinition /><RowDefinition /><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><Rectangle Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Fill="White" />  //跨两行<Rectangle Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Fill="Red" /> //跨两列<Rectangle Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Yellow" /> //跨两行和两列</Grid>

二、StackPanel

可将包航的元素在竖直或水平方向上排成一条直线，当移动一个元素后后面的元素会自动向前移动以填充空缺。该面板简单的在单行或单列中以堆栈形式放置其子元素。

常用属性	描述
Orientation	定义UI排列方向（默认 Horizontal）
LayoutTransform	定义UI缩放旋转
SizeToContent	根据内容调整大小

<Window x:Class="WpfApplication6.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525"><StackPanel><Label>a</Label><Button>button1</Button><Button>button2</Button><Button>button3</Button><Button>button3</Button></StackPanel>
</Window>

注意：虽然每个元素都提供Height和Width属性，用于显示的指定元素大小，但是不推荐使用。应当使用最大最小尺寸属性，将控件限制在正确的范围内。（使用“样式”允许重复使用属性设置的特性）

WrapPanel (换行面板)

WrapPanel 可根据其中 UI 的尺寸和其自身的大小自动把其中的 UI 排列到下一行或下一列，相当于自动换行。

<WrapPanel><Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/><Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/><Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/><Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/><Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/><Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/></WrapPanel>

三、DockPanel

DockPanel内的元素会被附加上DockPanel.Dock这个属性，有Left，Top，Right和Bottom这四个属性，根据Dock的属性，DockPanel内的元素会根据他的属性在制定方向累计和切分DockPanel内的剩余空间。类似于winform中的Dock附加属性。

      <Menu DockPanel.Dock="Top"  Background="White"><!-- LastChildFill 属性设置为Ture，告诉DockPanel面板最后一个元素占满剩余空间 -->

<DockPanel><Rectangle DockPanel.Dock="Bottom" Width="200" Height="50" Fill="LightGray"/><Rectangle DockPanel.Dock="Top"    Width="200" Height="50" Fill="LightCoral"/><Rectangle DockPanel.Dock="Right"  Width="200" Height="50" Fill="LightBlue"/><Rectangle DockPanel.Dock="Left"   Width="200" Height="50" Fill="LightGreen"/><Rectangle Width="50" Height="50" Fill="LightPink"/></DockPanel>

使用Grid和GridSplitter来分割窗口
分割条由GridSplitter类表示，GridSplitter对象必须放在Grid单元格中，可以预留一列或一行专门用于放置GridSplitter。它的对齐放置决定了分割条是水平的还是竖指的，对于水平分割需将VerticalAlignment属性设置为Center,对于竖直分割条，需要将HorizontalAlignment属性设置为center.

四、Canvas

Canvas 可对其内部元素设定边界值，其作用类似于（Margin），默认为停靠左上角。

<Canvas><TextBox Text="左上角" Width="100" Height="100" Canvas.Top="0" Canvas.Left="0"/><TextBox Text="右上角" Width="100" Height="100" Canvas.Top="0" Canvas.Right="0"/><TextBox Text="右下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Right="0"/><TextBox Text="左下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Left="0"/></Canvas>作者：WEI
链接：https://zhuanlan.zhihu.com/p/357897287

五、Border

Border类非常简单。它只能包含一段嵌套内容(通常是布局面板)，并为其添加背景或在其周围添加边框。

    <Border Padding="5" BorderBrush="SteelBlue" BorderThickness="5" CornerRadius="3"><StackPanel><Button>1</Button><!--  BorderBrush和 BorderThickness常常合用， CornerRadius使边宽具有圆角--><Button>2</Button><!-- 在边框和内部的内容之间添加空间（与此相对应，Margin属性在边框之外添加空间）   --><Button>3</Button></StackPanel></Border>

装载一篇文章，关于布局讲解的非常不错：https://www.zhihu.com/collection/646958178

UniformGrid (统一面板)

UniformGrid 将其内部所有元素按当前面板大小进行统一尺寸，自动排列。

<UniformGrid><TextBox Margin="5" Text="1"/><TextBox Margin="5" Text="2"/><TextBox Margin="5" Text="3"/><TextBox Margin="5" Text="4"/><TextBox Margin="5" Text="5"/><TextBox Margin="5" Text="6"/><TextBox Margin="5" Text="7"/><TextBox Margin="5" Text="8"/><TextBox Margin="5" Text="9"/></UniformGrid>