ListView的Items绑定和comboBox和CheckBox组合使用实现复选框的功能

ListView 控件的内容指定视图模式的方法,参考官方文档

ComboBox 样式和模板

案例说明:通过checkBox和ComboBox的组合方式实现下拉窗口的多选方式,同时说明了ListView中Items项目的两种绑定方式.

示例:

设计样式

Xaml代码

复制代码
<Window x:Class="ComboBox自定义多选.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ComboBox自定义多选"
        xmlns:hc="https://handyorg.github.io/handycontrol"        
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800"
        Background="DarkGray">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <!-- 定义多选ComboBox -->
            <ComboBox Name="multiSelectComboBox"
                      Width="200"
                      Height="30"
                      HorizontalAlignment="Left" 
                      IsEditable="True"
                      StaysOpenOnEdit="True"
                      IsReadOnly="True"
                      Text="多选列表"
                      Margin="10">
                <!-- 定义ComboBox的ItemTemplate,包含一个CheckBox -->
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <CheckBox Content="{Binding Name}"
                                  IsChecked="{Binding IsSelected, Mode=TwoWay}" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <!-- 按钮显示所选项目 -->
            <Button Content="查看选择了什么选项"
                    Width="170"
                    Height="30"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Left"
                    Margin="10"
                    Click="ShowSelectedOptions_Click" />
            <TextBlock Name="SelectItems"
                       Margin="10"></TextBlock>
        </StackPanel>
        <WrapPanel Grid.Column="1">
            <ListView Name="StudentList" Margin="10">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="姓名"                                        
                                        Width="200"
                                        DisplayMemberBinding="{Binding Name}"></GridViewColumn>
                        <GridViewColumn Header="年龄"
                                        Width="200"
                                        DisplayMemberBinding="{Binding Age}"></GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
            <Button Name="Mode1"
                    Margin="10"
                    HorizontalAlignment="Left"
                    Content="方式一"
                    Click="Mode1_Click"></Button>
            <Button Name="Mode2"
                    Margin="10"
                    HorizontalAlignment="Left"
                    Content="方式二"
                    Click="Mode2_Click"></Button>
         </WrapPanel>
    </Grid>
</Window>

CS代码

cs 复制代码
using System.Collections.ObjectModel;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ComboBox自定义多选
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Student> Items { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            // 初始化选项集合
            Items = new ObservableCollection<Student>
            {
                new Student { Name = "张三", Age = "20"},
                new Student { Name = "李四", Age = "21"},
                new Student { Name = "王五", Age = "22"},
                new Student { Name = "赵六", Age = "23"}
            };

            // 将Items集合绑定到ComboBox的ItemsSource
            multiSelectComboBox.ItemsSource = Items;           
        }

        // 显示已选择的选项
        private void ShowSelectedOptions_Click(object sender, RoutedEventArgs e)
        {
            // 获取所有IsSelected为true的项目
            var selectedItems = Items.Where(item => item.IsSelected).Select(item => item.Name).ToList();

            // 显示选择的项目
            SelectItems.Text = "你选择了: " + string.Join(", ", selectedItems);
        }

        // 数据项类
        public class Student
        {
            public string? Name { get; set; }
            public string? Age {  get; set; }
            public bool IsSelected { get; set; }
        }

        private void Mode1_Click(object sender, RoutedEventArgs e)
        {
            StudentList.Items.Clear();
            // 初始化选项集合
            Items = new ObservableCollection<Student>
            {
                new Student { Name = "张三", Age = "20"},
                new Student { Name = "李四", Age = "21"},
                new Student { Name = "王五", Age = "22"},
                new Student { Name = "赵六", Age = "23"}
            };
            // 将Items集合绑定到ListView的ItemsSource
            StudentList.ItemsSource = Items;
        }

        private void Mode2_Click(object sender, RoutedEventArgs e)
        {
            StudentList.ItemsSource = null;
            StudentList.Items.Clear();
            StudentList.Items.Add(new Student { Name = "孙悟空", Age = "10000" });
            StudentList.Items.Add(new Student { Name = "悟能", Age = "5000" });
            StudentList.Items.Add(new Student { Name = "悟净", Age = "3000" });
            StudentList.Items.Add(new Student { Name = "唐僧", Age = "30" });
        }
    }
}

使用效果展示

启动页面

点击"方式一"

点击"方式二"

查看多选框的下拉菜单

选择两个项目

点击"查看选择了什么选项"

相关推荐
科雷软件测试11 小时前
Midscene.js - AI驱动,带来全新UI自动化体验(安装配置篇)
javascript·人工智能·ui
特立独行的猫a13 小时前
OpenHarmony海思WS63星闪平台:LVGL UI框架底层显示驱动移植指南
ui·lvgl·移植·openharmony·驱动·ws63
qq_49244844618 小时前
AirTest APP UI自动化测试框架
macos·ui·cocoa
文人sec18 小时前
抛弃 Postman!用 Pytest+Requests+Allure+Playwright+Minium 搭建高逼格接口+UI自动化测试平台
自动化测试·python·测试工具·ui·pytest·playwright
长安第一美人1 天前
AI辅助下的嵌入式UI系统设计与实践(二)[代码阅读理解]
c++·嵌入式硬件·ui·显示屏·工业应用
HwJack202 天前
HarmonyOS应用开发中EmbeddedUIExtensionAbility:跨进程 UI 嵌入的“幕后导演“
ui·华为·harmonyos
电子云与长程纠缠2 天前
Godot学习04 - UI界面
学习·ui·godot
云和数据.ChenGuang2 天前
AI向量数据库chromadb的swagger-ui的运行使用教程
大数据·数据库·人工智能·ui·向量数据库·向量计算
Swift社区2 天前
ArkUI 的页面生命周期详解
ui·arkui
kishu_iOS&AI2 天前
【BUG】Openclaw 2026.3.22版本 Control UI网页控制台打不开
ui·openclaw