WPF之布局样式

一 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：用于设置边框的圆角半径。可以是一个数字，也可以是四个数字（分别代表左上、右上、右下、左下的半径）。

使用场合

• 适合需要强调或分隔内容的场景，如分组框、卡片布局或内容装饰。