- Grid
Grid会以网格的形式对内容元素进行布局,其特点如下:
- 可以定义任意数量的行和列,非常灵活;
- 行的高度和列的宽度可以使用绝对数值、相对比例或自动调整的方式进行精确设定,并可设置最大值和最小值;
- 内部元素可以设置自己所在的行和列,还可以设置自己纵向跨几行、横向跨几列;
- 可以设置Children元素的对齐方向。
Grid适用场合有:
- UI布局的大框架设计;
- 大量UI元素需要成行或者成列对齐的情况;
- UI整体尺寸改变时,元素需要保持固有的高度和宽度比例;
- UI后期可能有较大变更或扩展。
定义Grid
Grid有ColumnDefinitions和RowDefinitions两个属性,来定义列和行,代码如下:
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> </Grid>
也可通过代码动态添加,代码如下:
this.MyGrid.RowDefinitions.Add(new RowDefinition());
this.MyGrid.ColumnDefinitions.Add(new ColumnDefinition());
Grid的行高列宽单位
计算机图形设计的标准单位是像素(Pixel),所以Grid的行高列宽的单位就是像素,除此之外还接受英寸(Inch)、厘米(Centimeter)和点(Point)作为单位。
UI只显示在计算机屏幕上,使用像素最为合适,如果程序涉及打印输出,则选择厘米、英制单位使用英寸比较合适。
Grid的行高列宽值
可以设置三类值:
- 绝对值:double数值加上单位后缀(以像素为单位可以省略),一经设定后就不再改变。常用于控件的宽度和高度不再改变或用空行空列作为控件间隔;
- 比例值:double数值后加上一个星号(*),当UI的整体尺寸改变后,控件会保持固有的比例。默认形式就是比例值,即没有显示设置行高列宽是默认是1*;
- 自动值:字符串Auto,行高列宽由其内的控件决定,没有控件则为0。
- StackPanel
StackPanel可以把内部元素在纵向或横向上紧凑排列,形成栈式布局,通俗讲就是把内部元素像垒积木一样“摞起来”。当把前面的元素去掉后,后面的元素就会整体向前移动,补充原有元素的空间。
StackPanel使用的场合有:
- 同类元素需要紧凑排列(如制作菜单或者列表);
- 移除其中的元素后能够自动补缺的布局或动画。
定义StackPanel
StackPanel用三个属性来控制内部元素的布局
属性标题 | 数据类型 | 可取值 | 描述 |
Orientation | Orientation枚举 |
Horizontal Vertical |
决定内部元素是横向积累还是纵向积累 |
HorizontalAlignment | HorizontalAlignmen枚举 |
Left Center Right Stretch |
决定内部元素水平方向上的对齐方式 |
VerticalAlignment | VerticalAlignment枚举 |
Top Center Botton Stretch |
决定内部元素竖直方向上的对齐方式 |
定义代码如下:
<StackPanel Orientation="Vertical" VerticalAlignment="Top"> </StackPanel>
- Canves
在Canves里布局与在Windows Form窗体上布局是一样的,只是在Windows Form开发时我们通过设置控件的Left和Top等属性来确定控件在窗体的位置,而在WPF中控件没有Left和Top的属性,当控件被放入Canves里时就被附加上类Canves.X和Canves.Y属性。
Canves适用场合有:
- 一经设计基本上不会再有改动的小布局(如图标);
- 艺术性比较强的布局;
- 需要大量使用横坐标进行绝对点定位的布局;
- 依赖于横坐标的动画。
- DockPanel
DockPanel内的元素会被附加上DockPanel.Dock这个属性,该属性为Dock枚举,可取Left、Top、Right、Bottom四个值。根据Dock属性值,DockPanel内的元素会向指定方向累积,切分DockPanel内部的剩余可用空间。
DockPanel还有一个重要的属性-bool类型的LastChildFill,默认值为True。当LastChildFill为True时,DockPanel内最后一个元素的Dock属性将被忽略,这个元素会把DockPanel内部所有剩余空间充满。
- WrapPanel
WrapPanel内部采用的是流式布局。WrapPanel使用Orientation属性来控制流延伸的方向,使用HorizonatalAlignment和VerticalAlignment两个属性控制内部控件的对齐。在流延伸的方向上,WrapPanel会排列尽可能多的控件,排不下的控件将会新起一行或一列继续排列。