WPF基础五：UI①布局元素DockPanel

目录

 

DockPanel

Dock 属性：

不指定子元素大小

指定子元素的大小(Width="100")

更改子元素的顺序

LastChildFill 

默认情况下，Panel 元素不接收焦点。 若要强制 panel 元素以接收焦点，请将 Focusable 属性设置为 true 。

后台创建DockPanel代码

 

---

DockPanel

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

名称	备注	权限
字段
DockProperty	标识 Dock 附加属性	public
LastChildFillProperty	标识 LastChildFill 依赖项属性	public
属性
LastChildFill	指示 DockPanel 中的最后一个子元素是否拉伸以填充剩余的可用空间	public
方法
ArrangeOverride	排列 DockPanel 元素的内容（子元素）	protected
GetDock	//获取指定的 UIElement 的 Dock 附加属性值
MeasureOverride	测量 DockPanel 的子元素	protected
SetDock	将 Dock 附加属性的值设置为指定的元素。	public
附加属性
Dock	指示一个子元素在父级 DockPanel 中的位置

---

Dock 属性：

屏幕上的DockPanel的子元素的位置由各自子元素的Dock 属性 以及 这些子元素的相对 DockPanel顺序确定 。 因此，具有相同 Dock 属性值的一组子元素可以在屏幕上以不同方式定位，具体取决于这些子元素在 DockPanel下的顺序 。由于DockPanel依次迭代其子元素，因此子元素排序效果定位，取决于剩余空间来设置每个元素的位置。

不指定子元素大小

<Window x:Class="_5_UI详解.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:_5_UI详解"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DockPanel LastChildFill="True">
            <Button Content="Btn1" DockPanel.Dock="Top"/>
            <Button Content="Btn2" DockPanel.Dock="Top"/>
            <Button Content="Btn3" DockPanel.Dock="Top"/>
            <Button Content="Btn4" DockPanel.Dock="Top"/>
        </DockPanel>
    </Grid>
</Window>

 

指定子元素的大小(Width="100")

增加子元素个数

<Window x:Class="_5_UI详解.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:_5_UI详解"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DockPanel LastChildFill="True">
            <Button Content="Btn1" DockPanel.Dock="Top" />            
            <Button Content="Btn2" DockPanel.Dock="Left" />
            <Button Content="Btn3" DockPanel.Dock="Right" />
            <Button Content="Btn4" DockPanel.Dock="Bottom" />
            <Button Content="Btn5" />
            <Button Content="Btn6" DockPanel.Dock="Top" />
        </DockPanel>
    </Grid>
</Window>

更改子元素的顺序

---

LastChildFill 

如果将属性设置 LastChildFill 为（默认设置），则中的 true 最后一个子元素始终会 DockPanel 填充剩余空间，而不考虑在最后一个子元素上设置的任何其他 dock 值。 若要以另一个方向停靠子元素，则必须将 LastChildFill 属性设置为 false ，并且还必须为最后一个子元素指定显式停靠方向。

将以上代码LastFill改为Flase，最后一个元素Btn6将不会填充满剩余空间。

<Window x:Class="_5_UI详解.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:_5_UI详解"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
        <DockPanel LastChildFill="False">
            <Button Content="Btn2" DockPanel.Dock="Left" />
            <Button Content="Btn3" DockPanel.Dock="Right" />
            <Button Content="Btn1" DockPanel.Dock="Top" />    
            <Button Content="Btn4" DockPanel.Dock="Bottom" />
            <Button Content="Btn5" />
            <Button Content="Btn6" DockPanel.Dock="Top" />
        </DockPanel>
    </Grid>
</Window>

---

默认情况下，Panel 元素不接收焦点。 若要强制 panel 元素以接收焦点，请将 Focusable 属性设置为 true 。

---

后台创建DockPanel代码

MainWindow.xaml.cs代码如下，其余默认不修改

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace _5_UI详解
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            //DockPannel
            List<Button> buttons = new List<Button>();
            for (int i = 0; i < 6; i++)
            {                
                buttons.Add(new Button());
                buttons[i].Content = "Btn" + (i + 1);
            }
            DockPanel.SetDock(buttons[1], Dock.Left);
            DockPanel.SetDock(buttons[2], Dock.Right);
            DockPanel.SetDock(buttons[0], Dock.Top);
            DockPanel.SetDock(buttons[3], Dock.Bottom);
            DockPanel.SetDock(buttons[5], Dock.Top);

            DockPanel dockPanel = new DockPanel();
            dockPanel.LastChildFill = false;

            dockPanel.Children.Add(buttons[1]);
            dockPanel.Children.Add(buttons[2]);
            dockPanel.Children.Add(buttons[0]);
            dockPanel.Children.Add(buttons[3]);
            dockPanel.Children.Add(buttons[4]);
            dockPanel.Children.Add(buttons[5]);

            (this.Content as Grid).Children.Add(dockPanel);

        }
    }
}