总目录：https://www.v2know.com/MainPage/Category/WPF

常用的布局容器：

• Grid
• StackPanel
• WrapPanel
• DockPanel
• UniformGrid

Grid

Grid为WPF中最常用的布局容器，作为View中的主要组成部分，负责框架中整体的页面布局。

Grid.RowDefinitions：可以创建任意多行。

Grid.ColumnDefinitions：可以创建任意多列。

ShowGridLines：可以设置边距线的显示。

什么是设置边距线的显示？

举个例子：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions> 
</Grid>

这样将把Window分割成两行两列。

这个时候设计器是显示分割的，实际上你必须再在<Grid>里面添加ShowGridLines="True"才会在运行时显示。

一般不显示边距线。（除非你要测试用）

在之前的设计代码基础上，你还可以对<RowDefinition/>设计Height，可以是数值或百分比，或倍数。

重点提一下倍数，你可以写<RowDefinition Height="2*" />——这表示该行Height是另外一行Height的两倍。

倍数写法，不知道在HTML里面有没有，反正我是没用过，这还是第一次见。

StackPanel

Horizontal为水平布局, Vertical为垂直布局。

Orientation：用于设置StackPanel的元素排列方式，默认以垂直的方式布局。

使用方法：

<StackPanel Orientation="Horizontal">
            <Button Width="40" Height="40" Background="Red"/>
            <Button Width="40" Height="40" Background="Beige"/>
            <Button Width="40" Height="40" Background="DarkBlue"/>
            <Button Width="40" Height="40" Background="Pink"/>
            <Button Width="40" Height="40" Background="DarkGray"/>
</StackPanel>

它只是个排列容器，像以上xaml的排列，按钮会靠左边开始按书写顺序排列，上下是居中的。

而在不设置Orientation，默认是垂直布局，顶着Window的顶部边开始从上往下排列。

注意，这些按钮之间是无间距的，它们完全贴合在一起。（这很HTML，非要说的话，这个玩意儿有点像div）

WrapPanel

这个控件就得和上一个控件一起说了，

它与StackPanel的区别在于——它会换行。

嘛，看名称也能看出来罢。以前学C#学到堆和栈，在画示意图的时候，堆就是一堆，栈就像搭积木一样竖直得老高。

而这里的StackPanel也是直来直去的。（甚至只要突出边界，因为只要有一点Space，它就会强行插入，不管溢出）

WrapPanel里面能元素会自动换行，能自动展示出一个比较美观的排列方式。

DockPanel

它有4个枚举值Top、Right、Bottom、Left用于设置元素的锚定位置。

<DockPanel>
            <Button Width="40" Height="40" Background="Red"/>
            <Button Width="40" Height="40" Background="Beige"/>
            <Button Width="40" Height="40" Background="DarkBlue"/>
            <Button Width="40" Height="40" Background="Pink"/>
</DockPanel>

当不设置DockPanel内4个元素的锚定值的时候，默认LastChild元素会填充最后的空间。（直接居中）

<DockPanel LastChildFill="False">
            <Button Width="40" Height="40" Background="Red"/>
            <Button Width="40" Height="40" Background="Beige"/>
            <Button Width="40" Height="40" Background="DarkBlue"/>
            <Button Width="40" Height="40" Background="Pink"/>
</DockPanel>

我们可以通过设置LastChildFill="False"来调整它。

一般的使用方式：

<DockPanel LastChildFill="False">
            <Button DockPanel.Dock="Top" Width="40" Height="40" Background="Red"/>
            <Button DockPanel.Dock="Bottom" Width="40" Height="40" Background="Beige"/>
            <Button DockPanel.Dock="Left" Width="40" Height="40" Background="DarkBlue"/>
            <Button DockPanel.Dock="Right" Width="40" Height="40" Background="Pink"/>
</DockPanel>

不得不说，写WPF程序，感觉IDE的作用太过强劲了，我之前写C#的时候还没这么多自动补全，一些XAML全是自动补全。（草）

UniformGrid

这个可以用来定义Row和Column，与之前不同的是，它无法定义Row和Column的Size。

它的优点是自动化排列和大小。（其实更像自动化的表格）

这让我想到了Winform里面一个控件叫FlowLayoutPanel，也是同样的功能（指自动排列），我还写过这个控件的Scroll版本（为了实现PCR里面的角色选择）。

总结

差不多了，真的和HTML里面div一样了。

下一篇：

关于WPF程序的样式设计和编写