WPF（Windows Presentation Foundation）是微软推出的用于构建Windows桌面应用的UI框架，其UI组件（控件）体系丰富且灵活，支持样式定制、数据绑定、模板化等核心特性。下面按常用分类介绍核心UI组件的功能、使用场景和基础示例，帮助快速掌握它们的用法。
一、基础布局控件（容器控件）
布局控件是承载其他UI元素的容器，决定子元素的排列方式，是WPF界面的骨架。
| 控件 | 核心功能 | 适用场景 |
|---|---|---|
| Grid | 网格布局（行+列），最常用的布局控件 | 复杂界面（如表单、多模块页面） |
| StackPanel | 线性布局（水平/垂直），子元素自动排列 | 简单列表、按钮组、工具栏 |
| WrapPanel | 自动换行的线性布局 | 标签云、动态生成的按钮列表 |
| DockPanel | 按方向（上/下/左/右）停靠子元素 | 带工具栏/状态栏的经典窗口布局 |
| Canvas | 绝对坐标布局（X/Y定位） | 绘图、自定义位置的元素（如游戏） |
| UniformGrid | 等大小的网格布局（行/列自动均分） | 九宫格、计算器按键布局 |
示例：Grid + StackPanel 组合布局
xml
<Window x:Class="WpfControlsDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="布局示例" Height="300" Width="400">
<!-- Grid布局：2行1列 -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!-- 行高自适应内容 -->
<RowDefinition Height="*"/> <!-- 剩余空间占满 -->
</Grid.RowDefinitions>
<!-- 第一行：StackPanel垂直排列按钮 -->
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="10" Spacing="5">
<Button Content="按钮1" Width="80"/>
<Button Content="按钮2" Width="80"/>
<Button Content="按钮3" Width="80"/>
</StackPanel>
<!-- 第二行：Canvas绝对定位文本 -->
<Canvas Grid.Row="1" Background="LightGray">
<TextBlock Text="绝对定位文本" Canvas.Left="50" Canvas.Top="30" FontSize="16"/>
</Canvas>
</Grid>
</Window>二、基础交互控件
这类控件用于用户输入/操作，是和用户交互的核心。
1. Button（按钮）
最基础的交互控件，点击触发事件。
xml
<!-- 普通按钮 -->
<Button Content="点击我" Width="100" Height="30"
Click="Button_Click"/> <!-- 绑定点击事件 -->
<!-- 带图标按钮（结合Image） -->
<Button Width="100" Height="30">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Image Source="icon.png" Width="16" Height="16" Margin="0 0 5 0"/>
<TextBlock Text="保存"/>
</StackPanel>
</Button>2. TextBlock & TextBox
- TextBlock：显示静态文本（不可编辑），支持富文本（字体、颜色、换行）；
- TextBox：输入/编辑文本（单行/多行）。
xml
<!-- TextBlock -->
<TextBlock Text="用户名：" FontSize="14" Foreground="Black"
FontWeight="Bold" Margin="5"/>
<!-- TextBox（单行） -->
<TextBox Width="200" Height="30" PlaceholderText="请输入用户名"
Text="{Binding UserName}"/> <!-- 数据绑定 -->
<!-- TextBox（多行） -->
<TextBox Width="200" Height="100" AcceptsReturn="True"
TextWrapping="Wrap"/> <!-- 允许换行、自动换行 -->3. CheckBox & RadioButton
- CheckBox：多选控件（可勾选/取消）；
- RadioButton：单选控件（同一组内只能选一个）。
xml
<!-- CheckBox -->
<StackPanel Margin="10">
<CheckBox Content="记住密码" IsChecked="True"/> <!-- 默认勾选 -->
<CheckBox Content="自动登录" IsChecked="{Binding AutoLogin}"/>
</StackPanel>
<!-- RadioButton（同一GroupName为一组） -->
<StackPanel Margin="10" Orientation="Horizontal">
<RadioButton Content="男" GroupName="Gender" IsChecked="True"/>
<RadioButton Content="女" GroupName="Gender" Margin="10 0 0 0"/>
</StackPanel>4. ComboBox & ListBox
- ComboBox：下拉选择框（单行显示，展开选）；
- ListBox：列表选择框（多行显示，支持单选/多选）。
xml
<!-- ComboBox -->
<ComboBox Width="200" Height="30" SelectedIndex="0"> <!-- 默认选第1项 -->
<ComboBoxItem Content="北京"/>
<ComboBoxItem Content="上海"/>
<ComboBoxItem Content="广州"/>
</ComboBox>
<!-- ListBox（多选） -->
<ListBox Width="200" Height="100" SelectionMode="Multiple"> <!-- 允许多选 -->
<ListBoxItem Content="苹果"/>
<ListBoxItem Content="香蕉"/>
<ListBoxItem Content="橙子"/>
</ListBox>5. DatePicker & TimePicker
用于选择日期/时间，简化日期输入。
xml
<StackPanel Orientation="Horizontal" Margin="10">
<DatePicker Width="200" Height="30" SelectedDate="2026-03-13"/> <!-- 默认日期 -->
<TimePicker Width="150" Height="30" Margin="10 0 0 0" SelectedTime="09:00:00"/>
</StackPanel>三、高级UI控件
适用于更复杂的场景（数据展示、导航、弹窗等）。
1. DataGrid
表格控件，用于展示和编辑结构化数据（支持排序、筛选、分页）。
xml
<!-- 绑定数据源（后台需定义DataTable或集合） -->
<DataGrid x:Name="dgData" Width="400" Height="200"
AutoGenerateColumns="True" <!-- 自动生成列 -->
CanUserSortColumns="True" <!-- 允许排序 -->
CanUserResizeColumns="True"/> <!-- 允许调整列宽 -->后台代码（绑定数据源示例）：
csharp
public MainWindow()
{
InitializeComponent();
// 模拟数据源
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("姓名", typeof(string));
dt.Columns.Add("年龄", typeof(int));
dt.Rows.Add(1, "张三", 25);
dt.Rows.Add(2, "李四", 30);
dgData.ItemsSource = dt.DefaultView; // 绑定到DataGrid
}2. TabControl
选项卡控件，用于分栏展示不同内容（如浏览器标签页）。
xml
<TabControl Width="400" Height="200">
<TabItem Header="标签1"> <!-- 标签头 -->
<TextBlock Text="标签1的内容" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</TabItem>
<TabItem Header="标签2">
<TextBox PlaceholderText="标签2的输入框" Margin="10"/>
</TabItem>
</TabControl>3. Menu & ContextMenu
- Menu：顶部菜单栏（如软件的文件/编辑菜单）；
- ContextMenu：右键菜单。
xml
<!-- 顶部Menu -->
<Menu>
<MenuItem Header="文件(F)">
<MenuItem Header="新建(N)" Click="NewMenuItem_Click"/>
<MenuItem Header="保存(S)" Click="SaveMenuItem_Click"/>
<Separator/> <!-- 分隔线 -->
<MenuItem Header="退出(E)" Click="ExitMenuItem_Click"/>
</MenuItem>
<MenuItem Header="编辑(E)">
<MenuItem Header="复制(C)"/>
<MenuItem Header="粘贴(V)"/>
</MenuItem>
</Menu>
<!-- 右键ContextMenu（绑定到Grid） -->
<Grid>
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="刷新"/>
<MenuItem Header="属性"/>
</ContextMenu>
</Grid.ContextMenu>
</Grid>4. MessageBox（弹窗）
代码触发的消息提示框（无XAML，纯后台代码）。
csharp
// 简单提示框
MessageBox.Show("操作成功！", "提示", MessageBoxButton.OK, MessageBoxImage.Information);
// 确认框（判断用户选择）
MessageBoxResult result = MessageBox.Show("是否删除该数据？", "警告",
MessageBoxButton.YesNo, MessageBoxImage.Warning);
if (result == MessageBoxResult.Yes)
{
// 执行删除逻辑
}5. ProgressBar & Slider
- ProgressBar：进度条（显示任务进度）；
- Slider：滑动条（调节数值，如音量、亮度）。
xml
<StackPanel Margin="10">
<!-- 进度条（值范围0-100） -->
<ProgressBar Width="300" Height="20" Value="50" Minimum="0" Maximum="100"/>
<!-- 滑动条（绑定值） -->
<Slider Width="300" Height="20" Minimum="0" Maximum="100"
Value="{Binding Volume}" TickFrequency="10" TickPlacement="BottomRight"/>
</StackPanel>四、控件通用属性（核心）
所有WPF控件都继承自FrameworkElement，拥有通用属性，掌握这些能大幅提升使用效率：
- 布局属性 ：
Width/Height（宽高）、Margin（外边距）、Padding（内边距）、HorizontalAlignment/VerticalAlignment（对齐方式）； - 样式属性 ：
Background（背景色）、Foreground（前景色/文字色）、FontSize/FontWeight（字体大小/粗细）、BorderBrush/BorderThickness（边框色/边框宽度）； - 状态属性 ：
IsEnabled（是否可用）、IsVisible（是否可见）、IsReadOnly（是否只读，针对输入控件）； - 事件绑定 ：
Click（点击）、SelectionChanged（选择变更）、TextChanged（文本变更）等。
总结
- 布局优先：WPF界面开发先选布局控件（Grid最常用）搭建骨架，再填充交互控件；
- 核心分类：基础布局控件（容器）、基础交互控件（输入/操作）、高级控件（表格/选项卡/菜单）是WPF UI的核心；
- 通用属性：所有控件共享布局、样式、状态类属性，掌握这些能统一定制控件外观和行为。
ps：来源豆包