WPF学习笔记3——Layout之1

时间:2023-03-09 16:17:12
WPF学习笔记3——Layout之1

一、概述

了解XAML的基本之后,进入Layout的学习。Layout,即布局,可能需要用到几种不同的容器。每一种容器都有各自的逻辑。在用户界面的设计过程中,很多时候是在想办法使得界面更加吸引、实在、便捷。然而,如何使得布局能够很好地适应不同窗口是一个难点。以往,开发者使用基于坐标的方法定位布局和控件。如今,WPF虽然也可以使用这种方法,但是通常更好的做法是创建能够适应不同内容、语言和显示器分辨率的方法。下面简单介绍基本的布局、容器,并举几个例子加深了解。

二、几个概念

1.一个WPF窗体只能有一个元素(element)。为了添加更多的元素,使得程序更符合实际需要,需要放置一个容器并且添加其他元素进去。WPF中,布局取决于你所使用的容器。通常理想的WPF程序遵循以下几点原则(概念):

i.元素(例如控件)不应该被指定大小,而是应该自我调整,以适应所在的容器。例如,一个按钮, 在其文字变多的时候,应该自动变大或变长。你可以设置容器的最大和最小大小(size)。

ii.元素不应该指定它所在的屏幕坐标位置,而是应该根据所在的容器、基于大小、顺序等等在容器中排列。如果你需要添加元素直接的空白,可以使用Margin属性来设置。

iii.很多时候,硬性规定大小和位置是不好的,因为这样限制了你的用户界面的本地化,并且更难处理动态变更的内容。

iv.布局容器可以被嵌入到其它布局容器当中,作为子容器。

v.布局容器可以分享它们的可用空间给它们的子容器。

2.布局过程。分两个阶段:测量阶段和排列阶段。在测量阶段,容器遍历子元素并了解它们的大小。在排列阶段,容器将其子元素放置到合适的位置。一个元素可能没有固定的大小,有时候容器不足够大,这时容器或元素调整以适应可视范围。当然,你也可以通过设置最小窗口大小来避免这种情况。布局容器不提供滚动(scrolling)功能。实际上,滚动功能是特定的内容控件(content control)——ScrollingViewer所支持的。

3.布局容器。所有WPF布局容器都是继承抽象类System.Windows.Controls.Panel。Panel类有三个公共属性:Background、Children、IsItemsHost。你也可以通过重载定义自己的布局容器。特别的,重载MeasureOverride()和ArrangeOverride()方法来改变容器在组织子元素时的测量阶段和排列阶段。自定义布局行为将在日后学习。由此可见,Panel基类提供的是一个起点,用来给其它更具特性的容器继承。WPF提供了一些继承自Panel的类。如同所有WPF控件和大多数可视元素,这些类都在命名空间System.Windows.Controls。常见的有以下几种:

StackPanel

栈面板。可以将元素排列成一行或者一列,每个元素各占一行或者一列。

WrapPanel

环绕面板。当元素布局到达边界时,可以自动换行。

DockPanel

停靠面板。可以将面板的某一边指定给每个元素,当面板大小变化时,按钮将根据指定的边进行停靠。

Grid

网格面板。以表格形式布局元素。(通常先设置Grid再放元素进去比较好)

UniformGrid

均布网格。 网格面板的子集。所有单元格大小相同。

Canvas

画布面板。用于设置元素的精确位置。

常见的面板属性如下:

HorizontalAlignment 水平校准。Center,Left,Right,Stretch
VerticalAlignment 垂直校准。Center,Top,Bottom,Stretch
Margin 边缘。设置元素边缘空白。
MinWidth/MinHeight 最小尺寸
MaxWidth/MaxHeight 最大尺寸
Width/Height 指定大小(不推荐)

动手摸索就理解了。相关细节参阅MSDN(http://msdn.microsoft.com/zh-cn/library/ms745058(v=vs.110).aspx)和(http://msdn.microsoft.com/zh-cn/library/ms751709(v=vs.110).aspx)。

日后介绍设置Stytle功能。

4.Border类(System.Windows.Controls.Border):绘制边框或背景。常见的属性有:Background,BorderBrush,BorderThickness,CornerRadius,Padding。详见MSDN(http://msdn.microsoft.com/zh-cn/library/system.windows.controls.border(v=vs.110).aspx)。细节:Padding是Border与内容之间的空白,而Margin是Border外部的空白。