学习WPF——WPF布局——了解布局容器

简介: 原文:学习WPF——WPF布局——了解布局容器 WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归的过程,界面中任何一个容器元素都会被...
原文: 学习WPF——WPF布局——了解布局容器

WPF布局工作内部原理
WPF渲染布局时主要执行了两个工作:测量和排列
测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸
排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸
这是一个递归的过程,界面中任何一个容器元素都会被遍历到
WPF布局容器的继承机制
DispatcherObject
WPF应用程序使用单线程亲和模型(STA:Single-Thread Affinity),这意味着整个用户界面都为单个线程拥有,同时也意味着从另一个线程与用户界面元素交互是不安全的,但有很多情况下需要从其他线程访问界面元素,那怎么办呢?WPF有一个统一的机制来处理这些问题,这个我们在后续的章节涉及到之后再深入讲解,大家只要知道,只要继承DispatcherObject的界面元素就能很方便的处理这些问题就好啦
DependencyObject
WPF的属性的实现机制和Winform程序有很大的差异,Winform控件的属性很多是通过继承机制得来的,在你认为超过90%的用户界面控件的属性通常留其初始值时,为每一个属性存储一个字段将是对内存的巨大的浪费。 DependencyObject(依赖属性)解决了仅仅存储改变了属性的问题。默认值在依赖属性中只存储一次。这只是依赖项属性的一个好处,还有其他好处我们以后再聊。
Visual
WPF程序中的所有可视化元素基本上都是继承自Visual类,这个类封装了绘图指令和附加的绘图细节(比如透明和裁剪等),如果你不想用WPF的界面元素,更希望使用一个轻量级的绘图API,那么你可以直接对Visual对象进行编程
UIElement
UIElement为可视元素增加了更多的功能,比如布局、输入、焦点、事件、命令等,
FrameworkElement
对UIElement进行了增强,比如UIElement为布局机制设置了基础,但FrameworkElement提供了支持它的重要属性,如:HorizontalAlignment、Margin等属性
Panel
是所有布局元素的基类,所有布局元素都派生自此类型,它用于放置和排列WPF元素,这个抽象类只包含三个公共属性:Background、Children、IsItemHost( IsItemHost标志着控件是不是类似TreeView、ListView这样的控件)
布局属性
布局容器内的子元素对自身的大小、位置有一定的决定权
子元素可以设置自身的布局属性来调整自己的位置和大小
HorizontalAlignment
水平对齐方式
VerticalAlignment
垂直对其方式
Margin
在元素周围添加一定的空隙
MinWidth/MinHeight
最小尺寸
MaxWidth/MaxHeight
最大尺寸
Width/Height
尺寸属性

Grid行与列的尺寸

如果要显式的设置Grid的行和列的尺寸,只要设置具体的值即可:
<RowDefinition Height="30"></RowDefinition>
但很多时候需要让行或者列自适应高度或者宽度,那么可以给相应的属性设置Auto值:
<RowDefinition Height="Auto"></RowDefinition>
还有的时候需要按比例设置行和列的高度或者宽度,那么可以使用*通配符:
<RowDefinition Height="*"></RowDefinition> 
<RowDefinition Height="2*"></RowDefinition>

Grid跨行与跨列

当希望Grid内的元素跨越多行或者多列的时候,可以使用RowSpan或ColumnSpan来实现
<Button Grid.RowSpan="2" Grid.ColumnSpan="2"></Button>

GridSpliter分割窗口

经常有这样的需求,需要通过拖动的方式改变一个窗口内部区域的大小
GridSpliter能很好的满足这种需求,
在增加一行或一列的大小的同时,减小其他行或者列的大小(因为一个窗口的区域大小是固定的,此消彼长)
注意HorizontalAlignment属性必须设置

共享尺寸

假设我们有两个Grid,每个Grid都有两行,而且两行的高度都设置为auto,
我们希望这两个Grid的行高保持一致
也就是说某一个grid的行高根据自身的内容变化之后,另一个grid的行高也跟着变化
以往实现这样的需求,一定要编写C#代码才行,现在我们可以使用WPF的共享尺寸特性来实现这一需求
(大家可以看到,第二个grid里的button我没有设置高度,但它也变高了)

均衡表格UniformGrid

当你不希望使用Grid复杂的行列设置,只希望把元素“平均”放置到界面上,
那么你可以使用UniformGrid来实现这样的需求

Z轴顺序

我们知道在Canvas布局容器中,如果位置重叠,后设置的元素会盖住先设置的元素,
如果想打破这种规定,那么可以使用ZIndex属性:

修改记录

2014-12-26:编写前两部分内容
2014-12-29:修改第二节的内容,增加最后两节的内容
2014-12-30:完成剩余的内容
2015-01-05:修改了几个文字

参考资料

《Pro WPF 4.5 in C# 4th Edition》
 
目录
相关文章
|
XML 开发框架 前端开发
WPF学习之基础知识篇
WPF(Windows Presentation Foundation)具有一个复杂且强大的架构,旨在提供丰富的用户界面、图形、动画和多媒体功能。
447 9
|
3月前
|
Java 虚拟化 容器
(Java)Java里JFrame窗体的基本操作(容器布局篇-1)
容器 容器,我的理解是可以包容其他东西的玩意。它可以是一个盒子,可以是一个虚拟化的物品,可只要能包裹住其他存在质体的东西,那么都可以称作是容器。例如:JPanel组件和JScollPane组件两者都是容器也是组件。 既然有容器,那么容器中的布局就必不可少了。不然不规矩的摆放物品,人类看不习惯,我也看不习惯 ???? 本篇内容,将说明java JFrame窗体里容器中几类布局。 说明:所有在JFrame窗体里的容器布局都会使用setLayout()方法,采用的布局参数都将放进这个方法里 绝对布局 调用窗体容器
139 1
|
3月前
|
NoSQL 算法 Redis
【Docker】(3)学习Docker中 镜像与容器数据卷、映射关系!手把手带你安装 MySql主从同步 和 Redis三主三从集群!并且进行主从切换与扩容操作,还有分析 哈希分区 等知识点!
Union文件系统(UnionFS)是一种**分层、轻量级并且高性能的文件系统**,它支持对文件系统的修改作为一次提交来一层层的叠加,同时可以将不同目录挂载到同一个虚拟文件系统下(unite several directories into a single virtual filesystem) Union 文件系统是 Docker 镜像的基础。 镜像可以通过分层来进行继承,基于基础镜像(没有父镜像),可以制作各种具体的应用镜像。
551 5
|
10月前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
864 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
7月前
|
设计模式 开发者 UED
123. [HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战:新闻阅读应用侧边栏布局 基础篇
在现代移动应用和平板应用中,侧边栏导航已经成为一种常见且实用的UI设计模式。HarmonyOS NEXT提供了专门的`SideBarContainer`组件来实现这一功能,它能够轻松创建可显示和隐藏的侧边栏布局,非常适合新闻阅读、电子商务、文件管理等应用场景。
202 3
123. [HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战:新闻阅读应用侧边栏布局 基础篇
|
7月前
|
UED 容器
124.[HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战:新闻阅读应用侧边栏布局 进阶篇
在基础篇中,我们学习了如何使用HarmonyOS NEXT的`SideBarContainer`组件创建新闻阅读应用的基本侧边栏布局。本篇教程将深入探讨如何为新闻阅读应用添加更多交互功能和状态管理,提升用户体验。
147 1
124.[HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战:新闻阅读应用侧边栏布局 进阶篇
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
213 2
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
214 1
|
7月前
|
UED 容器
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
197 0
|
移动开发 HTML5 容器
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)
本文介绍了Twaver HTML5中的网元管理容器(ElementBox),包括如何监听网元属性变化、容器属性变化、网元元素变化以及数据层次变化。文章通过示例代码展示了如何使用不同的事件监听方法来响应这些变化,并通过控制台输出相关的事件信息。
188 4
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)