DataGrid 中增加选择列 功能实现

效果

UI 层代码

引用命名空间

复制代码
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

<DataGrid
    Grid.Row="1" Margin="1,5,1,5" HorizontalContentAlignment="Center"
    AutoGenerateColumns="False" HeadersVisibility="All"
    ItemsSource="{Binding DataList}"
    SelectedItem="{Binding SelectTestResult}"
    SelectionMode="Single">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="{Binding [Select], Source={x:Static helper:LanguageHelper.Instance}}" HeaderStyle="{StaticResource ColumnHeaderStyle}">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <CheckBox x:Name="cboIsSelect" IsChecked="{Binding IsSelect, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                        <!--  关键:绑定 Checked/Unchecked 事件到命令  -->
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Checked">
                                <i:InvokeCommandAction Command="{Binding DataContext.SelectChangedCommand, RelativeSource={RelativeSource AncestorType=DataGrid}}" CommandParameter="{Binding}" />
                            </i:EventTrigger>
                            <i:EventTrigger EventName="Unchecked">
                                <i:InvokeCommandAction Command="{Binding DataContext.SelectChangedCommand, RelativeSource={RelativeSource AncestorType=DataGrid}}" CommandParameter="{Binding}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </CheckBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn
            Binding="{Binding Index}"
            CanUserSort="False"
            ElementStyle="{StaticResource ContentCenterStyle}"
            Header="{Binding [Index], Source={x:Static helper:LanguageHelper.Instance}}"
            HeaderStyle="{StaticResource ColumnHeaderStyle}"
            IsReadOnly="True" />
        <DataGridTextColumn
            Width="4*"
            Binding="{Binding WaferId}"
            CanUserSort="False"
            ElementStyle="{StaticResource ContentCenterStyle}"
            Header="{Binding [WaferID], Source={x:Static helper:LanguageHelper.Instance}}"
            HeaderStyle="{StaticResource ColumnHeaderStyle}"
            IsReadOnly="True" />
        <DataGridTextColumn
            Width="150"
            Binding="{Binding CreatedOn, Converter={StaticResource DateTimeConverter}}"
            CanUserSort="False"
            ElementStyle="{StaticResource ContentCenterStyle}"
            Header="{Binding [CreatedOnColumn], Source={x:Static helper:LanguageHelper.Instance}}"
            HeaderStyle="{StaticResource ColumnHeaderStyle}"
            IsReadOnly="True" />
    </DataGrid.Columns>
</DataGrid>

选择列代码(设备数据模板)

复制代码
<DataGridTemplateColumn Header="{Binding [Select], Source={x:Static helper:LanguageHelper.Instance}}" HeaderStyle="{StaticResource ColumnHeaderStyle}">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <CheckBox x:Name="cboIsSelect" IsChecked="{Binding IsSelect, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <!--  关键:绑定 Checked/Unchecked 事件到命令  -->
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding DataContext.SelectChangedCommand, RelativeSource={RelativeSource AncestorType=DataGrid}}" CommandParameter="{Binding}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="Unchecked">
                        <i:InvokeCommandAction Command="{Binding DataContext.SelectChangedCommand, RelativeSource={RelativeSource AncestorType=DataGrid}}" CommandParameter="{Binding}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </CheckBox>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

ViewModel

命令

复制代码
/// <summary>
/// 检测列表 选择改变事件
/// </summary>
public ICommand SelectChangedCommand => new RelayCommand<TestResultModel>(item =>
{
    // item 就是当前选中行的实体
    if (item.IsSelect)
    {
        // 勾选
        if (!SelectTestResultList.Contains(item))
        {
            SelectTestResultList.Add(item);
            SelectTestResultWaferIdList = string.Join(",", SelectTestResultList.Select(t => t.WaferId));
        }
    }
    else
    {
        // 取消勾选
        if (SelectTestResultList.Contains(item))
        {
            SelectTestResultList.Remove(item);
            SelectTestResultWaferIdList = string.Join(",", SelectTestResultList.Select(t => t.WaferId));
        }
    }
});
相关推荐
一个天蝎座 白勺 程序猿2 小时前
IoTDB集群扩容:从慌乱到从容的经验分享
数据库·wpf·时序数据库·iotdb
传奇开心果编程14 小时前
【SwiftUI提高练中学】第8课 网络层架构:拦截器、重试、缓存与离线优先
学习·macos·ui·ios·swiftui
传奇开心果编程15 小时前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
大圣编蚕17 小时前
Rancher证书轮换过期导致不能访问UI问题处理
ui·rancher
可乐ea18 小时前
Agent 评测换判据:用终态数据库状态判定任务是否完成
数据库·ui·oracle·mcp工具·agent评测·终态断言·智能体可靠性
传奇开心果编程21 小时前
【Compose Multiplatform 跨端开发学与练】第3课 布局与组件
android·windows·学习·ui·ios·kotlin·composer
samble1 天前
从零搭建灌装监控系统(十三):报警系统设计,生命周期与通知
c#·wpf·mvvm·modbus·工业控制
传奇开心果编程1 天前
【现代声明式UI学与练】第9课 性能优化——渲染优化、列表优化、内存优化、启动优化
学习·flutter·react native·ui·性能优化·swiftui·android jetpack
传奇开心果编程1 天前
【Compose Multiplatform 跨端开发学与练】第4课 导航与路由
android·windows·学习·ui·ios·kotlin·composer
传奇开心果编程1 天前
【Compose Multiplatform 跨端开发学与练】第6课 状态管理与架构
android·学习·ui·ios·架构·kotlin·composer