WPF控件布局（3）

原创

萤火之光丶 2023-05-11 10:04:27 博主文章分类：WPF ©著作权

文章标签 WPF DockPanel 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者萤火之光丶的原创作品，请联系作者获取转载授权，否则将追究法律责任

DockPanel：定义一个区域，从中可以按相对位置水平或垂直排列各个子元素。

命名空间:System.Windows.Controls

DockPanel主要注意Dock和LastChildFill属性。

DockPanel 在定义一个区域时应设置该区域的宽度（Width）或者高度（Heigth），否则所定义的区域不显示，如图1和图2所示。图1未显示前三个DockPanel区域。

图1代码

<Grid>
        <DockPanel Background="AliceBlue" >
            <DockPanel DockPanel.Dock="Left" Background="Blue"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Background="Teal"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Background="Green"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Brown"></DockPanel>
        </DockPanel>
    </Grid>

图2代码

<Grid>
        <DockPanel Background="AliceBlue" >
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Blue"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Teal"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Green"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Brown"></DockPanel>
        </DockPanel>
    </Grid>

WPF控件布局（3）_DockPanel WPF控件布局（3）_WPF_02

图1 图2

由图1和图2可知，最后一个DockPanel所定义的区域没有与前面的相连接，而是居中放置，这与DockPanel的LastChildFill设置值有关，若LastChildFill不设置值或值为True，则会出现图2现象，即最后一个DockPanel位置与前面的不衔接。若LastChildFill值设置为False,则衔接，如图3所示。

若最后一个DockPanel不设置Width，且LastChildFill值为True，则会默认将剩余空间全部填满，如图4所示。

图3代码

<Grid>
        <DockPanel Background="AliceBlue" LastChildFill="False" >
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Blue"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Teal"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Green"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Brown"></DockPanel>
        </DockPanel>
    </Grid>

图4代码

<Grid>
        <DockPanel Background="AliceBlue"  LastChildFill="True" >
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Blue"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Teal"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Green"></DockPanel>
            <DockPanel DockPanel.Dock="Left" Background="Brown"></DockPanel>
        </DockPanel>
    </Grid>

WPF控件布局（3）_WPF_03 WPF控件布局（3）_DockPanel_04

图3 图4

同样，DockPanel定义的区域可以环绕四周排列，如图5,、图6所示

图5代码

<Grid>
        <DockPanel Background="AliceBlue"  LastChildFill="False" >
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Blue"></DockPanel>
            <DockPanel DockPanel.Dock="Top" Height="100" Background="Teal"></DockPanel>
            <DockPanel DockPanel.Dock="Right" Width="100" Background="Green"></DockPanel>
            <DockPanel DockPanel.Dock="Bottom" Height="100" Background="Brown"></DockPanel>
        </DockPanel>
    </Grid>

图6代码

<Grid>
        <DockPanel Background="AliceBlue"  LastChildFill="True" >
            <DockPanel DockPanel.Dock="Left" Width="100" Background="Blue"></DockPanel>
            <DockPanel DockPanel.Dock="Top" Height="100" Background="Teal"></DockPanel>
            <DockPanel DockPanel.Dock="Right" Width="100" Background="Green"></DockPanel>
            <DockPanel DockPanel.Dock="Bottom"  Background="Brown"></DockPanel>
        </DockPanel>
    </Grid>

WPF控件布局（3）_DockPanel_05 WPF控件布局（3）_WPF_06