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));
        }
    }
});
相关推荐
SAP小崔说事儿3 小时前
SAP B1 批量应用用户界面配置模板
java·前端·ui·sap·b1·无锡sap
UXbot5 小时前
AI App 设计生成工具哪个好?
ui·kotlin·软件构建·产品经理·ai编程·swift
czhc11400756636 小时前
winform 330 跨线程 异步
wpf·线程·winform
想你依然心痛7 小时前
HarmonyOS 5.0教育行业解决方案:基于分布式能力的沉浸式智慧课堂系统
分布式·wpf·harmonyos
xy34537 小时前
Axure 9.0 原生组件:绘制折线图
ui·信息可视化·交互·axure·原型·折线图
吃一根烤肠7 小时前
使用ChatGPT Copilot加速Python调试:实战指南
前端·ui·html
Maybe_ch8 小时前
深度解析 WPF 线程模型:告别 UI 卡死,掌握 Dispatcher 核心机制
ui·wpf
智算菩萨8 小时前
【Tkinter】3 Tkinter Button 控件深度解析:从事件绑定到现代交互设计实战
python·microsoft·ui·交互·tkinter·button
code bean9 小时前
【Halcon 】用 Halcon 实现涂抹:Region、仿射变换与 WPF 交互
wpf·交互·halcon