WPF布局控件之DockPanel布局

2023-11-07 22:01
文章标签 布局 控件 wpf dockpanel

本文主要是介绍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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

总结

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

这篇关于WPF布局控件之DockPanel布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/366516

相关文章

WinForms中主要控件的详细使用教程

《WinForms中主要控件的详细使用教程》WinForms(WindowsForms)是Microsoft提供的用于构建Windows桌面应用程序的框架,它提供了丰富的控件集合,可以满足各种UI设计... 目录一、基础控件1. Button (按钮)2. Label (标签)3. TextBox (文本框

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

Qt中QGroupBox控件的实现

《Qt中QGroupBox控件的实现》QGroupBox是Qt框架中一个非常有用的控件,它主要用于组织和管理一组相关的控件,本文主要介绍了Qt中QGroupBox控件的实现,具有一定的参考价值,感兴趣... 目录引言一、基本属性二、常用方法2.1 构造函数 2.2 设置标题2.3 设置复选框模式2.4 是否

Qt中QUndoView控件的具体使用

《Qt中QUndoView控件的具体使用》QUndoView是Qt框架中用于可视化显示QUndoStack内容的控件,本文主要介绍了Qt中QUndoView控件的具体使用,具有一定的参考价值,感兴趣的... 目录引言一、QUndoView 的用途二、工作原理三、 如何与 QUnDOStack 配合使用四、自

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加