一 Grid：网格布局
布局特点
- 可以定义任意数量的行、列，并且轻松跨行、跨列
- 行、列高度可以设置绝对值、相对比例、自动调整等方式
属性
- RowDefinitions：定义行
- ColumnDefinitions：定义列
- ShowGridLines：显示虚线，辅助功能
使用场合
- UI的大布局设计
- UI需要整体尺寸改变时
二 StackPanel：栈式布局
布局特点
- 可以把内部元素在纵向或横向上紧凑排列，形成栈式布局，通俗来说把元素堆到一起
- 当把前面的元素去掉后，后面的元素会整体向前移动，占据原有元素控件
属性
- Orientation：决定内部元素是横向还是纵向积累。Horizontal：水平布局， Vertical：垂直布局
- VerticalAlignment 决定内部元素水平方向上的对齐方式
- HorizontalAlignment 决定内部元素垂直方向上的对其方式
- ColumnDefinitions：定义列
- FlowDirection：元素的排列方向。只有Orientation设置为Horizontal才有效。RightToLeft：从右到左，LeftToRight：从左到右（默认）
使用场合
- 同类型元素需要紧凑排列，比如制作菜单和列表
- 移除其中的元素后能够自动补缺的布局，或者动画
三 WrapPanel：流式布局
布局特点
- 在流延伸的方向上会排列尽可能多的控件，排列不下的控件会新起一行
- 使用Orientation属性控制流延伸的方向
属性
- Orientation：定义排列方向。Horizontal：水平布局， Vertical：垂直布局
使用场合
- 需要根据容器大小动态排列控件的场合，当剩余空间不足以存放下一个控件时，会自动换行
四 DockPanel：停靠布局
布局特点
- 根据dock属性值，元素向指定方向积累，切分DockPanel内部剩余控件，就行船舶的停靠一样
属性
- LastChildFill：用于控制 DockPanel中的最后一个子元素是否自动填充剩余的空间。默认情况下，这个属性的值是 True，意味着最后一个子元素将自动占据所有未被前面子元素使用的空间。
- DockPanel.Dock：设置元素的锚定位置。
使用场合
- 需要自动填满剩余控件的布局。（最后一个元素自动填满DockPanel内的剩余空间）
- LastChildFill最后一个元素是否填充剩余控件，默认为true
五 UniformGrid：均匀布局
布局特点
- 在有限的空间内，均分剩余的控件
属性
- Rows：设置行数
- Columns：设置列数
- FirstColumn：第一个子元素将放置开始位置的第几个
使用场合
- 适合需要均匀分布的场景，如棋盘布局、图标排列或平等分割的面板。
六 Canvas：绝对布局
布局特点
- Canvas允许在其子元素上进行绝对定位，即可以通过指定子元素的坐标（X 和 Y）来控制其在中的位置。
属性
- Canvas.Left：子元素相对于 Canvas左边缘的距离
- Canvas.Right：子元素相对于 Canvas右边缘的距离
- Canvas.Top：子元素相对于 Canvas顶部边缘的距离
- Canvas.Bottom：子元素相对于 Canvas底部边缘的距离
使用场合
- 需要使用绝对定位的布局，一经设计基本不会有改动的小布局
- 依赖于横纵坐标
七 ScrollViewer：滚动布局
布局特点
- ScrollViewer为包含的内容提供了水平和垂直滚动功能。
- 通过使用 ScrollViewer，你可以让超出视口（可见区域）的内容在需要时滚动显示。
属性
- HorizontalScrollBarVisibility：控制水平滚动条的可见性。
- VerticalScrollBarVisibility：控制垂直滚动条的可见性。
- CanContentScroll：如果设置为 True，子内容会实现逻辑滚动（如项的滚动），而不是物理滚动（如像素的滚动）。对于包含 ListBox 或 ListView 等控件的内容特别有用。
使用场合
- 适合需要滚动显示大量内容的场景，如文档查看器、图片浏览器或长列表显示。
八 ViewBox
布局特点
- 于缩放和调整其子元素的大小以适应自身的大小。
- 它在需要根据容器大小自动调整内容大小的场景中非常有用。
属性
-Stretch：控制内容的缩放方式。
-StretchDirection：控制内容缩放的方向。
使用场合
- 适合显示可缩放的图像或图标。
九 Border
布局特点
- Border 用于为其他控件或内容提供边框和背景。
- 它常用于给控件增加视觉效果，比如添加边框、背景色、圆角等。
- Border 控件非常灵活，可以与其他布局控件结合使用，以实现各种复杂的界面效果。
属性
-BorderBrush：用于设置边框的颜色。可以是单一颜色、渐变色或图像。
-BorderThickness：用于设置边框的厚度。可以是一个数字，也可以是四个数字（分别代表左、上、右、下的厚度）。
-Background：用于设置背景颜色。可以是单一颜色、渐变色或图像。
- CornerRadius：用于设置边框的圆角半径。可以是一个数字，也可以是四个数字（分别代表左上、右上、右下、左下的半径）。
使用场合
- 适合需要强调或分隔内容的场景，如分组框、卡片布局或内容装饰。
网友评论