WPF 常用布局控件的基础使用
WPF 常用布局控件
在WPF中，布局控件（也叫布局容器）负责安排子元素（比如按钮、文本框等）的摆放位置。
1. Grid（网格布局）
Grid 是最常用的布局控件，它把空间划分成行和列，可以让子元素按照表格方式排列。
示例：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
Grid.ColumnDefinitions>
<Button Content="按钮1" Grid.Row="0" Grid.Column="0"/>
<Button Content="按钮2" Grid.Row="0" Grid.Column="1"/>
<Button Content="按钮3" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
Grid>
说明：
RowDefinitions和ColumnDefinitions分别定义了行和列。Height="Auto"表示高度根据内容自动调整。Height="*"表示分配剩余空间。2*表示是1*的两倍宽。- 使用时，通过
Grid.RowSpan和Grid.ColumnSpan让一个控件占多个行或列。
常用属性
| 属性 | 作用 |
|---|---|
| RowDefinitions | 定义行 |
| ColumnDefinitions | 定义列 |
| Grid.Row / Grid.Column | 控件定位到哪行哪列 |
| Grid.RowSpan / ColumnSpan | 控件跨行/跨列 |
| ShowGridLines | 显示网格线（开发用） |
2. StackPanel（堆叠布局）
StackPanel 让子元素沿着一个方向（水平或垂直）依次排列。
示例（垂直排列）：
<StackPanel Orientation="Vertical">
<Button Content="按钮1" />
<Button Content="按钮2" />
<Button Content="按钮3" />
StackPanel>
示例（水平排列）：
<StackPanel Orientation="Horizontal">
<Button Content="按钮1" />
<Button Content="按钮2" />
<Button Content="按钮3" />
StackPanel>
3. WrapPanel（换行布局）
WrapPanel 和 StackPanel 类似，不过它在空间不足时会自动换行。
示例：
<WrapPanel>
<Button Content="按钮1" Width="100"/>
<Button Content="按钮2" Width="100"/>
<Button Content="按钮3" Width="100"/>
<Button Content="按钮4" Width="100"/>
WrapPanel>
如果空间不够，按钮4就会自动换到下一行。
4. DockPanel（停靠布局）
DockPanel 让子元素停靠到指定方向（上、下、左、右）。
示例：
<DockPanel>
<Button Content="顶部" DockPanel.Dock="Top" />
<Button Content="底部" DockPanel.Dock="Bottom" />
<Button Content="左边" DockPanel.Dock="Left" />
<Button Content="右边" DockPanel.Dock="Right" />
<Button Content="中间填充" />
DockPanel>
最后一个按钮会占据剩余的中间区域。
5. Canvas（绝对定位布局）
Canvas 是最简单的布局控件，可以指定元素的绝对位置。
示例：
<Canvas>
<Button Content="按钮1" Canvas.Left="50" Canvas.Top="20"/>
<Button Content="按钮2" Canvas.Left="150" Canvas.Top="80"/>
Canvas>
通过 Canvas.Left 和 Canvas.Top 精确指定控件的位置。
6. UniformGrid (均分网格)
UniformGrid 是一种特殊的 Grid，它的所有单元格具有相同的大小。适用于你需要均匀分布子元素的情况。
示例：
<UniformGrid Rows="2" Columns="3">
<Button Content="Button 1"/>
<Button Content="Button 2"/>
<Button Content="Button 3"/>
<Button Content="Button 4"/>
<Button Content="Button 5"/>
<Button Content="Button 6"/>
UniformGrid>
7. VirtualizingStackPanel
VirtualizingStackPanel 是 StackPanel 的一个优化版本，适用于大量数据的显示。当子元素不可见时，它会自动从 UI 中移除，从而节省资源，提高性能。通常与 ListBox 或 ListView 控件一起使用。
基本用法（自动开启）
在 ItemsControl 系列控件中，只要满足以下条件，WPF 默认启用虚拟化：
-
使用
VirtualizingStackPanel作为ItemsPanel； -
ScrollViewer.CanContentScroll="True"； -
数据是通过
ItemsSource绑定的； -
没有设置会破坏虚拟化的布局（如
WrapPanel、GroupStyle.Panel自定义等）；
1. 示例：ListBox 启用虚拟化（默认行为）
<ListBox ItemsSource="{Binding LargeDataList}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Standard"
ScrollViewer.CanContentScroll="True">
ListBox>
关键属性说明:
| 属性 | 说明 |
|---|---|
VirtualizingStackPanel.IsVirtualizing |
启用虚拟化，默认 True |
VirtualizingStackPanel.VirtualizationMode |
Standard（只虚拟 UI），Recycling（重用 UI 元素） |
ScrollViewer.CanContentScroll |
必须设为 True 才能虚拟化；设为 False 会禁用虚拟化 |
IsItemsHost="True" |
通常在自定义 ItemsPanelTemplate 时使用 |
2. 示例：自定义 ItemsPanel 使用 VirtualizingStackPanel
<ListView ItemsSource="{Binding LargeList}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsVirtualizing="True"
VirtualizationMode="Recycling"/>
ItemsPanelTemplate>
ListView.ItemsPanel>
ListView>
8. Border（边框）
虽然 Border 本身不算严格意义上的布局控件，但它常用于为控件添加边框、背景和内边距，可以在布局中发挥辅助作用。
示例：
<Border BorderBrush="Black" BorderThickness="2" Padding="10">
<Button Content="Button Inside Border"/>
Border>
9. TabControl（选项卡）
在 TabControl 内部，每个 TabItem 表示一个选项卡，并且 TabPanel 是负责管理选项卡的实际布局的控件。TabPanel 控件将选项卡（通常是 TabItem）水平或垂直排列，并为用户提供选择这些选项卡的功能
<TabControl>
<TabItem Header="Tab 1">
<TextBlock Text="这是第一个选项卡的内容" />
TabItem>
<TabItem Header="Tab 2">
<TextBlock Text="这是第二个选项卡的内容" />
TabItem>
<TabItem Header="Tab 3">
<TextBlock Text="这是第三个选项卡的内容" />
TabItem>
TabControl>