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));
        }
    }
});
相关推荐
HwJack2016 小时前
【HarmonyOS开发小实践】ArkUI 应用级状态AppStorage 与跨页面共享、持久化
ui·华为·性能优化·harmonyos
undsky_19 小时前
传统色 × 现代和弦:专为 UI/UX 打造的国风配色 Skill
ui·ai·aigc·ai编程·ux
gis开发之家1 天前
Spring Boot 4 定时任务与异步线程池:从 @Scheduled 到高并发任务编排(生产级实战)
java·spring boot·后端·wpf·spring boot4
clz13145212 天前
如何设计一个优雅可靠的金融级联机接口
wpf
Wang's Blog3 天前
Java框架快速入门: Spring Security+OAuth2之多因子认证与TOTP实战
java·spring·ui
闲云自留地3 天前
云平台存储管理员:Cinder 创建挂载卷 + Swift 分布式存储原理
分布式·wpf·swift
Huanzhi_Lin3 天前
UI业务模块化随笔
ui·mvc·mvp·ecs·ui框架·模块化开发
Quor3 天前
Zorv AI GenUI 技术架构深度解析:从双面设计到安全边界
人工智能·ui·架构
HwJack203 天前
HarmonyOS批量数据与性能优化实战:万条数据入库与不卡 UI 的查询
ui·性能优化·harmonyos