条目控件(Items Controls)

WPF 条目控件 = 继承自 ItemsControl 的一类控件，专门用来显示一组数据 / 一组子项。
它们统一遵循：
  • ItemsSource：绑定数据源（集合）
  • ItemTemplate：定义每一项长什么样
  • ItemsPanel：定义项怎么排列
  • ItemContainerStyle：定义项的容器样式
下面按最常用 → 功能更强的顺序，逐个精讲并给可直接复制运行的示例。

一、ItemsControl（最基础、最轻量的条目控件）

特点

  • 纯展示列表，没有选中、没有高亮、没有交互
  • 性能最轻，适合静态展示卡片、流布局、图标墙等
  • 完全由你控制样式和布局

示例：流布局卡片墙

 1 <ItemsControl Width="400" Height="300">
 2     <!-- 1. 数据源（静态写死） -->
 3     <ItemsControl.Items>
 4         <sys:String>卡片1</sys:String>
 5         <sys:String>卡片2</sys:String>
 6         <sys:String>卡片3</sys:String>
 7         <sys:String>卡片4</sys:String>
 8     </ItemsControl.Items>
 9 
10     <!-- 2. 每一项的外观 -->
11     <ItemsControl.ItemTemplate>
12         <DataTemplate>
13             <Border Width="80" Height="80" Background="LightBlue" CornerRadius="5" Margin="5">
14                 <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
15             </Border>
16         </DataTemplate>
17     </ItemsControl.ItemTemplate>
18 
19     <!-- 3. 布局方式：横向换行 -->
20     <ItemsControl.ItemsPanel>
21         <ItemsPanelTemplate>
22             <WrapPanel/>
23         </ItemsPanelTemplate>
24     </ItemsControl.ItemsPanel>
25 </ItemsControl>

适用场景

  • 商品卡片墙
  • 标签云
  • 纯展示类列表（不需要选中）

二、ListBox（最常用可选择列表）

特点

  • 支持单选 / 多选
  • 自带选中高亮、焦点、键盘导航
  • 自带滚动、默认虚拟化（大数据不卡）

示例：绑定对象列表 + 选中样式

 1 <ListBox Width="300" Height="200"
 2          SelectionMode="Extended"    <!-- 多选：Ctrl/Shift -->
 3          SelectedItem="{Binding SelectedPerson}">
 4 
 5     <!-- 每一项模板 -->
 6     <ListBox.ItemTemplate>
 7         <DataTemplate>
 8             <StackPanel Orientation="Horizontal" Margin="2">
 9                 <Ellipse Width="10" Height="10" Fill="Green" Margin="0 0 5 0"/>
10                 <TextBlock Text="{Binding Name}"/>
11                 <TextBlock Text=", 年龄：" Margin="5 0"/>
12                 <TextBlock Text="{Binding Age}"/>
13             </StackPanel>
14         </DataTemplate>
15     </ListBox.ItemTemplate>
16 
17     <!-- 自定义选中样式（蓝色背景） -->
18     <ListBox.ItemContainerStyle>
19         <Style TargetType="ListBoxItem">
20             <Style.Triggers>
21                 <Trigger Property="IsSelected" Value="True">
22                     <Setter Property="Background" Value="#0078D7"/>
23                     <Setter Property="Foreground" Value="White"/>
24                 </Trigger>
25             </Style.Triggers>
26         </Style>
27     </ListBox.ItemContainerStyle>
28 </ListBox>

后台绑定（可选）

 1 public class Person
 2 {
 3     public string Name { get; set; }
 4     public int Age { get; set; }
 5 }
 6 
 7 // 集合
 8 public ObservableCollection<Person> Persons { get; set; }
 9     = new ObservableCollection<Person>
10 {
11     new Person{Name="张三", Age=22},
12     new Person{Name="李四", Age=25}
13 };

适用场景

  • 菜单列表
  • 数据选择列表
  • 带多选的表格 / 列表

三、ComboBox（下拉选择框）

特点

  • 折叠式选择，节省空间
  • 单选为主
  • 内部就是一个 ListBox + 文本框

示例：下拉选择性别 / 城市

1 <ComboBox Width="150" Height="30"
2           SelectedIndex="0"
3           SelectedValuePath="Content">
4 
5     <ComboBoxItem>男</ComboBoxItem>
6     <ComboBoxItem>女</ComboBoxItem>
7     <ComboBoxItem>保密</ComboBoxItem>
8 </ComboBox>

绑定集合版本

1 <ComboBox Width="200"
2           ItemsSource="{Binding CityList}"
3           DisplayMemberPath="CityName"    <!-- 显示哪个属性 -->
4           SelectedValuePath="CityId"/>     <!-- 选中返回什么值 -->

适用场景

  • 表单下拉选择（性别、部门、状态）
  • 有限选项的快速选择

四、ListView（带视图 / 列的高级列表）

特点

  • 基于 ListBox 增强
  • 内置 GridView（多列表格）
  • 支持排序、分组、网格线
  • 企业管理系统最常用

示例：多列表格（最经典用法）

 1 <ListView Width="400" Height="200" ItemsSource="{Binding UserList}">
 2     <ListView.View>
 3         <GridView>
 4             <GridViewColumn Header="编号" DisplayMemberBinding="{Binding Id}" Width="60"/>
 5             <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}" Width="100"/>
 6             <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}" Width="60"/>
 7             <GridViewColumn Header="部门" DisplayMemberBinding="{Binding Dept}" Width="120"/>
 8         </GridView>
 9     </ListView.View>
10 </ListView>

适用场景

  • 后台管理系统数据列表
  • 用户列表、订单列表、日志列表
  • 需要多列展示的结构化数据

五、TabControl（标签页控件）

特点

  • 每一项是一个 TabItem
  • 每个 TabItem 自带 Header + Content
  • 典型的条目控件 + 头部内容模型混合结构

示例：多标签页

 1 <TabControl Width="400" Height="250">
 2     <TabItem Header="首页">
 3         <TextBlock Text="这是首页内容" Margin="10"/>
 4     </TabItem>
 5 
 6     <TabItem Header="设置">
 7         <StackPanel Margin="10">
 8             <CheckBox Content="开机启动"/>
 9             <CheckBox Content="自动更新"/>
10         </StackPanel>
11     </TabItem>
12 
13     <TabItem Header="关于">
14         <TextBlock Text="版本 1.0.0" Margin="10"/>
15     </TabItem>
16 </TabControl>

适用场景

  • 多页面切换
  • 配置界面
  • 模块化内容切换

六、Menu / ContextMenu（菜单）

特点

  • 层级条目控件
  • 支持多级子菜单
  • 支持命令、图标、快捷键

示例：顶部菜单

 1 Menu Width="200" HorizontalAlignment="Left">
 2     <MenuItem Header="文件">
 3         <MenuItem Header="新建" InputGestureText="Ctrl+N"/>
 4         <MenuItem Header="打开"/>
 5         <Separator/>
 6         <MenuItem Header="退出"/>
 7     </MenuItem>
 8 
 9     <MenuItem Header="编辑">
10         <MenuItem Header="复制"/>
11         <MenuItem Header="粘贴"/>
12     </MenuItem>
13 </Menu>

右键菜单

1 <Button Content="右键我">
2     <Button.ContextMenu>
3         <ContextMenu>
4             <MenuItem Header="重命名"/>
5             <MenuItem Header="删除"/>
6         </ContextMenu>
7     </Button.ContextMenu>
8 </Button>

七、TreeView（树形结构条目控件）

特点

  • 层级展示（树形）
  • 每一项是 TreeViewItem
  • 支持递归绑定（HierarchicalDataTemplate）

简单示例

1 <TreeView Width="200" Height="200">
2     <TreeViewItem Header="我的电脑" IsExpanded="True">
3         <TreeViewItem Header="本地磁盘 C:"/>
4         <TreeViewItem Header="本地磁盘 D:"/>
5     </TreeViewItem>
6 
7     <TreeViewItem Header="网络"/>
8 </TreeView>

适用场景

  • 目录树
  • 组织架构
  • 层级菜单

条目控件核心通用知识点（必背）

1. 它们都有的关键属性

  • ItemsSource="{Binding 集合}" → MVVM 标准绑定方式
  • ItemTemplate → 每一项长什么样
  • ItemsPanel → 项怎么排列（StackPanel/WrapPanel/UniformGrid）
  • ItemContainerStyle → 项容器的样式（ListBoxItem 等）

2. 性能关键点：虚拟化

ListBox / ListView 默认开启 UI 虚拟化，只渲染屏幕可见项，几万条不卡顿。 
开启方式：
1 <ListBox VirtualizingStackPanel.IsVirtualizing="True"
2          VirtualizingStackPanel.VirtualizationMode="Recycling"/>

3. 选择类控件通用属性

  • SelectedItem：选中的对象
  • SelectedIndex：选中索引
  • SelectedValue：按路径取值
  • SelectionMode：Single / Multiple / Extended

快速选择指南

  • 只展示，不要选中 → ItemsControl
  • 单选 / 多选列表 → ListBox
  • 下拉选择 → ComboBox
  • 多列表格 → ListView
  • 多标签页 → TabControl
  • 菜单 / 右键 → Menu / ContextMenu
  • 树形结构 → TreeView
posted on 2026-03-22 16:41  工业搬砖猿Lee  阅读(37)  评论(0)    收藏  举报

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3