WPF入门-2.布局控件

发表于 分类于

WPF 入门（二）：布局控件

常见布局控件一览

控件名 说明
Grid 灵活分行分列
StackPanel 垂直/水平线性排列
DockPanel 停靠在上下左右或填充
WrapPanel 自动换行排列
Canvas 绝对定位
UniformGrid 等宽等高网格
Viewbox 可整体缩放内容

1. Grid（网格布局）

Grid 是最常用的布局控件之一，可以将界面划分为行和列，实现灵活的网格布局。

常用属性：

属性 说明
RowDefinitions 定义行集合
ColumnDefinitions 定义列集合
Grid.Row 指定子元素所在的行
Grid.Column 指定子元素所在的列
Grid.RowSpan 子元素跨越的行数
Grid.ColumnSpan 子元素跨越的列数

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto"/>
		<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="2*"/>
		<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<TextBlock Text="标题" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
	<Button Content="按钮1" Grid.Row="1" Grid.Column="0" />
	<Button Content="按钮2" Grid.Row="1" Grid.Column="1" />
</Grid>

Grid 适合用于需要复杂布局的场景。

Height 和 Width 属性说明

在 WPF 布局控件中，Height（高度）和 Width（宽度）属性用于设置控件的尺寸。

取值 说明
数值（如100） 以设备无关像素（DIP）为单位的长度，1 DIP=1/96 英寸
Auto 自动适应内容或父容器，由布局系统决定实际大小
* 用于 Grid 行高/列宽，按比例分配剩余空间，如2表示两份，表示一份

示例：

1
2
3
4
5
<Grid.RowDefinitions>
	<RowDefinition Height="Auto" /> <!-- 高度自适应内容 -->
	<RowDefinition Height="2*" />   <!-- 占用剩余空间的 2 份 -->
</Grid.RowDefinitions>
<Button Width="100" Height="30" Content="按钮" /> <!-- 固定宽高 -->

2. StackPanel（堆叠面板）

StackPanel 会将子元素按照指定方向（垂直或水平）依次排列。

常用属性：

属性 说明
Orientation 排列方向，Vertical（默认）或 Horizontal

细节说明：

  • 通常不需要显式设置 Height 和 Width，默认会根据内容自动调整大小。如果父容器有限制，也可以手动设置。
  • 内部元素不会重叠，而是依次排列。
  • 如果内容超出 StackPanel 的宽度（或高度），超出部分会被裁剪（不可见），不会自动换行。
  • 如需自动换行效果，可使用 WrapPanel。

示例：

1
2
3
4
5
<StackPanel Orientation="Vertical">
	<Button Content="按钮1" />
	<Button Content="按钮2" />
	<Button Content="按钮3" />
</StackPanel>

StackPanel 适合用于简单的线性排列场景。

3. DockPanel(停靠面板)

占位

4. WrapPanel(换行面板)

占位

5. Canvas(画布)

占位

6. UniformGrid(等距网格)

占位

7. ViewBox(缩放容器)

占位