• WPF布局控件之DockPanel布局

    前言：博主文章仅用于学习、研究和交流目的，不足和错误之处在所难免，希望大家能够批评指出，博主核实后马上更改。

    概述：

    DockPanel 位置子控件基于子 Dock 属性，你有 4 个选项停靠，左 (默认) ，右，上，下。 如果希望添加到 DockPanel 的最后一项填充剩余空间，可以将 DockPanel LastChildFill 属性设置为 true。

    名称说明
    Grid网格，根据自定义行和列来设置控件的布局
    StackPanel栈式面板，包含的元素在竖直或水平方向排成一条直线
    WrapPanel自动折行面板，包含的元素在排满一行后，自动换行
    DockPanel泊靠式面板，内部的元素可以选择泊靠方向
    UniformGrid网格,UniformGrid就是Grid的简化版，每个单元格的大小相同。
    Canvas画布，内部元素根据像素为单位绝对坐标进行定位
    Border装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件

    一、DockPanel

    常用属性数据类型可选值说明
    DockPanelDockLeft、Top、Right、Bottom
    MarginThickness获取或设置元素的外边距
    HorizontalAlignmentHorizontalAlignmentCenter（中心）/Left（靠左）/Right（靠右）/Stretch（拉伸以填充父元素）决定内部元素在水平方向的对齐方式
    VerticalAlignmentVerticalAlignmentTop（上方）/Center（中心）/Bottom（下方）/Stretch（拉伸以填充父元素）决定内部元素在垂直方向的对齐方式
    Opacitydouble透明度
    LastChildFillbool获取或设置一个值，该值指示 DockPanel 中的最后一个子元素是否拉伸以填充剩余的可用空间，默认为True（填充）

    LastChildFill=“True” 默认全部填充

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    LastChildFill=“False”

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    Opacity=“0.1”

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    Margin=“20”

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    总结

    在实际工作中，我们可以使用DockPanel、HorizontalAlignment、VerticalAlignment,LastChildFill 这四个个属性组合各种排列和对齐方式。

  • 相关阅读:
    torch中tensor的相关操作
    《刺客信条：起源》画面BUG？我先“退”一步！
    亿发软件：现代化机械制造行业建设企业一体化管理系统的必要性
    cad怎么转为黑白pdf
    visual studio 启用DPI识别功能
    那些年，我们追过的Go BUG
    巧用 Java 8 的 Optional 优雅的规避 NPE
    自建K8S-devops自动化流程
    [英雄星球七月集训LeetCode解题日报] 第4日 贪心
    Python 学习路线图
  • 原文地址：https://blog.csdn.net/qq_36819973/article/details/134200924