WPF编程基础入门 ——— 第三章 布局（三）布局面板DockPanel

WPF——DockPanel布局控件

DockPanel(停靠面板) ，让子元素停靠在整个面板的某一条边上。当多个子元素停靠在相同的边时，根据声明的先后顺序依次停靠，系统默认的最后一个声明子元素来填满剩余空间。
例如Windows文件资源管理器(我的电脑/此电脑)窗口，就是利用DockPanel的常见布局方式。
现在将Windows窗口分解后，它是由菜单栏、工具栏、搜索框、文件夹列表框、详细列表框和状态栏(Windows10后续版本则变为了页面项目数量显示和调整项目查看方式工具栏)组成的

---

DockPanel实例——仿Windows文件资源管理器界面布局

此例设计要求：现在使用停靠面板来创建Windows文件资源管理器窗口的基本结构，在此用Button来表示所有的子元素。依旧是在解决方案WpfApp3新建项目：命名项目名字SimWindows。
效果图：

“停靠面板"中，DockPanel.Dock作为Button的附加属性，用来设置上(Top)、下(Bottom)、左(Left)、*右(Right)*的停靠位置。

实现代码：

<Window x:Class="SimWindows.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:SimWindows"
        mc:Ignorable="d"
        Title="MainWindow" Height="360" Width="640">
    <DockPanel>
        <Button DockPanel.Dock="Top">菜单栏 区域</Button>
        <Button DockPanel.Dock="Top">工具栏 区域</Button>
        <Button DockPanel.Dock="Top">搜索框 区域</Button>
        <Button DockPanel.Dock="Bottom">状态栏 区域</Button>
        <Button DockPanel.Dock="Left">文件夹列表 区域</Button>
        <Button DockPanel.Dock="Right">平铺信息列表 区域</Button>
    </DockPanel>
</Window>

然后通过调整Button声明的顺序来改变页面布局结构，效果如下图：

更改后的XAML代码如下：

<!-- 保留Window代码 -->
    <DockPanel>
        <Button DockPanel.Dock="Top">菜单栏 区域</Button>
        <Button DockPanel.Dock="Left">文件夹列表 区域</Button>
        <Button DockPanel.Dock="Top">工具栏 区域</Button>
        <Button DockPanel.Dock="Top">搜索框 区域</Button>
        <Button DockPanel.Dock="Bottom">状态栏 区域</Button>
        <Button DockPanel.Dock="Right">平铺信息列表 区域</Button>
    </DockPanel>
</Window>

有心的同学会发现，在文件区域与平铺信息列表区域之间没有分隔条，而像Windows窗口的分隔条的WPF控件是GridSplitter，它依赖于Grid控件，后面讲到Grid时我们会在对其说明。

---

相关阅读
上一篇：WPF编程基础入门 ——— 第三章 布局（二）布局面板Canvas.
下一篇：WPF编程基础入门 ——— 第三章 布局（四）布局面板StackPanel.
WPF编程基础入门 ——— 目录导航.