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));
        }
    }
});
相关推荐
小羊没烦恼!13 小时前
分布式事务 | 使用DTM 的Saga 模式
java·linux·运维·数据库·wpf
且随疾风前行.2 天前
Paint Cavans高级绘制:[一]Paint画笔高级应用
android·ui
唯鹿2 天前
AI生成UI代码实践(二)—— Figba 更新月记
ui·ai·figma·1024程序员节·蓝湖
fqbqrr2 天前
2610C++,UI复合技术在窗口中绘画字体图标
c++·ui
samble2 天前
从零搭建半导体设备上位机(二):Prism + DryIoc,五个工程与区域导航怎么串起来
wpf·prism·dryioc
一条闲鱼_mytube2 天前
分布式 ID 生成方案:雪花算法与号段模式
分布式·算法·wpf
她说彩礼65万2 天前
WPF Prism代码走读
wpf
xy34533 天前
Axure 9.0 列表框 介绍
ui·axure·原型·产品设计
xy34533 天前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
特立独行的猫a3 天前
仓颉语言cj-tauri 跨端开发框架实战:给鸿蒙侧加一个「读设备电量」的原生能力
ui·harmonyos·tauri·1024程序员节·仓颉·鸿蒙pc