社区首页 >专栏 >【愚公系列】2023年10月 WPF控件专题 DockPanel控件详解

【愚公系列】2023年10月 WPF控件专题 DockPanel控件详解

原创

愚公搬代码

发布于 2023-10-04 15:46:20

6610

文章被收录于专栏：历史专栏历史专栏

🚀前言

WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。

自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。

🚀一、DockPanel控件详解

WPF中的DockPanel控件是一种面板控件，它可以将其子控件沿着指定的边缘对齐并填充整个可用空间。DockPanel控件可以用于创建一些经典的用户界面布局，如应用程序的顶部工具栏、底部状态栏、左侧导航栏等。

DockPanel控件有一个属性叫做Dock，它是一个枚举类型，可以指定子控件应该放置在哪个位置。Dock属性有以下四个可用的值：

Left：子控件应该放置在DockPanel的左侧。
Right：子控件应该放置在DockPanel的右侧。
Top：子控件应该放置在DockPanel的顶部。
Bottom：子控件应该放置在DockPanel的底部。

当一个子控件的Dock属性被设置为Left或Right时，它会被放置在上一个已经在DockPanel中设置了Dock属性的子控件的左侧或右侧。当子控件的Dock属性被设置为Top或Bottom时，它会被放置在上一个已经在DockPanel中设置了Dock属性的子控件的顶部或底部。

下面是一个DockPanel控件的示例：

<DockPanel>
    <Button DockPanel.Dock="Top" Content="Top" />
    <Button DockPanel.Dock="Left" Content="Left" />
    <Button DockPanel.Dock="Right" Content="Right" />
    <Button DockPanel.Dock="Bottom" Content="Bottom" />
    <Button Content="Center" />
</DockPanel>

🔎1.属性介绍

在WPF中，DockPanel控件有以下属性：

LastChildFill：一个布尔值，确定最后一个子元素是否填充剩余空间。如果是 true，则最后一个子元素将填充剩余空间。如果是 false，则最后一个子元素将不会填充剩余空间。
Dock：指定元素在DockPanel中的位置。可以将元素靠左、靠右、靠上或靠下排列。
Background：指定DockPanel的背景颜色。
Width：指定DockPanel的宽度。
Height：指定DockPanel的高度。
VerticalAlignment：指定DockPanel在父元素中的垂直对齐方式。
HorizontalAlignment：指定DockPanel在父元素中的水平对齐方式。
Margin：指定DockPanel与其父元素之间的空白区域。
Children：DockPanel中包含的子元素。可以通过XAML或代码向Children添加元素。

🔎2.常用场景

DockPanel控件在WPF中常用于以下场景：

程序界面布局：DockPanel可以快速、方便地实现程序界面的布局，将多个控件按照顶部、底部、左侧、右侧等方向排列，可以有效利用窗口空间。
工具栏布局：DockPanel可以用来实现工具栏的布局，例如将工具栏放在窗口的顶部或左侧。
父子元素布局：DockPanel可以用来实现将子元素固定在父元素的某个位置。
界面优化：DockPanel可以优化程序的界面效果，例如开发一个文本编辑器时，在编辑区域上方添加一个工具栏，可以方便用户进行操作。

DockPanel控件适用于大多数需要界面布局的场景，简单易用，是WPF中常用的布局控件之一。

🔎3.具体案例

<Grid>
<!--LastChildFill 默认为true  最后的元素完全填充剩余的部分-->
<!--如果在同一侧，依靠了多个元素，它们按顺序依次排列-->
    <DockPanel LastChildFill="True">
            <StackPanel DockPanel.Dock="Top" Background="LightBlue" Height="50">
                    <Label Content="Top"/>
            </StackPanel>
            <StackPanel DockPanel.Dock="Bottom" Background="OrangeRed"  Height="50">
                    <Label Content="Bottom"/>
            </StackPanel>
            <StackPanel DockPanel.Dock="Left" Background="LightGray" Width="100">
                    <Label Content="Left"/>
            </StackPanel>
            <StackPanel DockPanel.Dock="Left" Background="LightGray" Width="100">
                    <Label Content="Left2"/>
            </StackPanel>
            <StackPanel DockPanel.Dock="Right" Background="Green" Width="100">
                    <Label Content="Right"/>
            </StackPanel>

            <Grid Background="BlueViolet">
                    <Label Content="Content"/>
            </Grid>
            <Grid Background="Orange">
                    <DockPanel LastChildFill="True">
                            <Button  Content="top" Height="30" DockPanel.Dock="Top"/>
                            <Button  Content="bottom" Height="30" DockPanel.Dock="Bottom"/>
                            <Button  Content="left" Width="30" DockPanel.Dock="Left"/>
                            <Button  Content="right" />
                    </DockPanel>
            </Grid>
    </DockPanel>
</Grid>