学习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》 http://www.cnblogs.com/jimson/archive/2010/07/29/DependencyProperties.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Bootstrap源码分析之nav、collapse

导航分析(nav): 源码文件: _navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertic...

35780
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

23350
来自专栏腾讯NEXT学位

CSS布局解决方案(下)

26470
来自专栏青玉伏案

ReactNative之参照具体示例来看RN中的FlexBox布局

今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客。上篇博客《ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State...

14520
来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

17710
来自专栏儿童编程

【动画原理续篇】Python Turtle动画不连续难题解决方案

前一段时间发过一篇小文“心中有剑,落叶飞花,皆是兵器”-Python动画原理揭示及案例,在文末提出了一个疑问:画图的速度比较慢。即使speed()调到最大(sp...

60630
来自专栏Micro_awake web

谈谈CSS中一些比较"偏门"的小知识 前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获! 1.常见的浏览器...

21160
来自专栏互联网杂技

超全整理前端开发面试题——CSS篇(2016年)

介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE 盒子模型、W3C 盒子模型; (2)盒模型:内容(content)、填充...

450130
来自专栏Porschev[钟慰]的专栏

jQuery Gallery Plugin在Asp.Net中使用

jQuery Gallery Plugin在Asp.Net中使用 推荐一个简单易用的Gallery插件:jQuery Gallery Plugin 下面是在As...

20490
来自专栏三十课

【基础】CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案...

50450

扫码关注云+社区

领取腾讯云代金券