WPF 常用布局控件的基础使用-CSDN博客

本文链接：https://blog.csdn.net/weixin_48990772/article/details/147769351

📚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>