WPF 页面布局
1. WPF UI布局
1. 布局的原则
第一、如果做屏幕适应的程序,不要显示的设置元素(控件)的尺寸,一般可以设置最小和最大尺寸。
第二、不应使用屏幕坐标指定元素位置,元素的位置应该由它所在的容器决定。
第三、布局容器可以嵌套。
2. 布局的容器
第一、Grid 面板
第二、StackPanel 面板
第三、Canvas 面板
第四、DockPanel 面板
第五、WrapPanel 面板
2. Grid 面板(像 一个 table)
1. 布局特点
第一、可以定义任意数量的行、列,并且轻松跨行、跨列。
第二、行、列高度或者宽度可以设置绝对值、相对比例、自动调整等方式。
第三、GridSplitter可以重新分布Grid控件的列间距或行间距。(类似于WinForm中SplitContainer)
2. 适用场合
第一、UI 的大布局设计。
第二、UI 需要整体尺寸改变时。
3. StackPanel 面板
1. 布局特点
第一、可以把内部元素在纵向或者横向上紧凑排列,形成栈式布局,通俗来说就是把元素堆到一块。
第二、当把前面的元素去掉后,后面的会整体向前移动,占领原有元素空间。
2. 适用场合
第一、同类型原型需要紧凑排列(比如制作菜单或者列表)
第二、移除其中的元素后能够自动补缺的布局,或者动画。
3. 三个属性
第一、Orientaion 属性:决定内部元素是横向还是纵向积累。
第二、HorizontalAlignment 属性:决定内部元素水平方上的对齐方式。
第三、VerticalAlignment 属性:决定内部元素垂直方向上的对齐方式。
4. Canvas 面板(画布)
1. 布局特点
第一、在面板内部,我们可以通过 x 和 y 的坐标属性,直接控制控件的位置,非常类似 winform 中的 top和 left 定位。
第二、我们可以直接通过拖放的形式选择控件的位置。
2. 适用场合
第一、一经设计基本上不会有改动的小布局。
第二、需要使用绝对定位的布局。
第三、依赖于横纵坐标的动画。
5. DockPanel 面板(停靠)
1. 布局特点
根据 Dock 属性值,元素向指定方向累积,切分 DockPanel 内部剩余空间,就像传播停靠一样。
2. 适用场合
需要自动填满剩余空间的布局。(最后一个元素自动填满 DockPanel 内的剩余空间), 除非DockPanel的LastChildFill属性为false,它将朝某个方向停靠。
6. WrapPanel 面板(流式布局,类似 web 中 div 的 float)
1. 布局特点
第一、在流延伸的方向上会排列尽可能多的控件。当长度或高度不够时自动调整进行换行换列
第二、使用 Orientaion 属性控制流延伸的方向。
2. 适用场合
需要根据容器大小动态排列控件的场合。
7. UniformGrid布局
1. 布局特点
-
UniformGrid就是Grid的简化版,每个单元格的大小相同,不需要定义行列集合。每个单元格始终具有相同的大小,只能容纳一个控件。
-
若不设置RowsColums,则按照定义在其内部的元素个数,自动创建行列,并通常保持相同的行列数。若只设置Rows则固定行数,自动扩展列数。若只设置Colums则固定列数,自动扩展行数。
2. 使用场合
需要根据容器大小自动创建大小相同的单元格
8.ScrollViewer布局
1 布局特点
第一、ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件。(若要显示多个子控件,需要将一个附加的 Panel控件放置在父 ScrollViewer中,然后可以将子控件放置在该控件中。)
第二、两个属性,HorizontalScrollBarVisibility水平滚动条是否显示默认为Hidden,VerticalScrollBarVisibility垂直滚动条是否显示 默认为Visible。
一般我们都会设置 HorizontalScrollBarVisibility=“Auto” VerticalScrollBarVisibility=“Auto”
意思是:当内容超出可视范围时,才显示横向/纵向滚动条
2 适应场合
当容器控件小不够显示全部内容时
9. Border 控件
1. 特点
第一、Border 是一个装饰的控件、用于绘制边框及背景。
第二、在Border中只能有一个子控件,若要显示多个子控件,需要将一个附加的Panel控件放置在父Border中。然后可以将子控件放置在该 Panel控件中。
2. 常用属性
Background: 背景色 ;
BorderBrush: 边框色 ;
BorderThickness: 边框宽度;
CornerRadius: 各个角半径;
—不积跬步无以致千里,不积小流无以成江海。