学习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

 

时间: 2024-10-01 23:16:34

学习WPF——WPF布局——了解布局容器的相关文章

Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

  [Android布局学习系列]   1.Android 布局学习之--Layout(布局)详解一   2.Android 布局学习之--Layout(布局)详解二(常见布局和布局参数)   3.Android 布局学习之--LinearLayout的layout_weight属性   4.Android 布局学习之--LinearLayout属性baselineAligned的作用及baseline      Layout Parameters(布局参数):            在XML文

学习 ExtJS 4 面板与布局

原文 http://www.cnblogs.com/codealone/archive/2013/06/04/3091325.html 面板Panel Ext.panel.Panel拓展自Ext.container.Container,它可以应用布局(默认为AUTO)也可以作为各种组件 的容器,并且可以拓展出更加强大的面板.作为标准的面板组件包括5部分,底部工具栏(bottom toolbars).顶部工具栏(top toolbars).面板头部(header).面板底部(footer)和面板体

qt中格子布局删除布局中的控件,行数未减少

问题描述 qt中格子布局删除布局中的控件,行数未减少 //原先这个格子布局中有4个按钮,现在删除第一个的按钮,在最后以后添加一个按钮. QLayoutItem* pDeleteItem(NULL); pDeleteItem = m_pGridLayout->itemAt(0); if(pDeleteItem != NULL) { QWidget* pWidget = pDeleteItem->widget(); m_pGridLayout->removeWidget(pWidget);

Android 中RecyclerView多种item布局的写法(头布局+脚布局)

RecyclerView多个item布局的写法(头布局+脚布局) 上图 github 下载源码 Initial commit第一次提交的代码,为本文内容 以下的为主要代码,看注释即可,比较简单 MainActivity 含上拉加载更多 package com.anew.recyclerviewall; import android.os.Bundle; import android.os.Handler; import android.support.v7.app.AppCompatActivi

利用WPF建立自适应窗口大小布局的WinForm窗口

编写WinForm程序时,都会碰到一个问题.就是WinForm窗口在不同分辨率下的大小问题.举例说明,你编写的WinForm窗口在1024×768下是合适.匀称的.不过,如果用户的计算机的分辨率为1400×900时,你的WinForm窗口就显得偏小,其中的字体和控件都显得偏小.如果用户的分辨率为640×480,那你的窗口就远远超过它的屏幕的大小. 如何解决这个问题?一般的WinForm程序都会这样操作:程序启动-->获取屏幕分辨率-->调整窗体的大小-->调整各个控件大小及位置-->

一起谈.NET技术,利用WPF建立自适应窗口大小布局的WinForm窗口

编写WinForm程序时,都会碰到一个问题.就是WinForm窗口在不同分辨率下的大小问题.举例说明,你编写的WinForm窗口在1024×768下是合适.匀称的.不过,如果用户的计算机的分辨率为1400×900时,你的WinForm窗口就显得偏小,其中的字体和控件都显得偏小.如果用户的分辨率为640×480,那你的窗口就远远超过它的屏幕的大小. 如何解决这个问题?一般的WinForm程序都会这样操作:程序启动-->获取屏幕分辨率-->调整窗体的大小-->调整各个控件大小及位置-->

WPF笔记(1.4 布局)——Hello,WPF!

这一节只是第2章的引子. 布局要使用Panel控件,有四种Panel,如下: DockPanel,就是设置停靠位置布局模型. StackPanel,提供一个从左至右或从上至下放置内容的堆栈模型. Grid,提供一个允许进行 行/网格定位的模型.可使用表格. Canvas,可精确定位. 其中,Grid是最常用的,vs2005自动生成的Page和window都默认带有这个标签: Example 1-25. A sample usage of the Grid panel <Window > <

【WPF】完美的布局不留白:解决WrapPanel右侧留白问题

充分利用界面上的空间,是优秀软件界面布局设计的原则之一.如果布局上出现了大片的空白区域就会给人一种浪费和不谐调的感觉.如下 图所示. 我们把ListBox的ItemsPanel设置为一个WrapPanel.让里面的Items可以自动折行.但是这样在ListBox的右侧,会出现一块空白区.很多情 况下,我们对于Item的大小并不很在意,这时我们会更希望Item的宽度可以随着整体宽度自动地调节.产生如下图所示的效果.

WPF Label 拖拽布局问题

问题描述 我在UniformGrid内动态生成了N个label,并给背景图片,如果做到拖拽任意Label可以改变其位置,最好改变之后可以把其他的排序,类似win8系统的图标拖拽前台<Windowx:Class="WpfWin8Demo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft