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));
        }
    }
});
相关推荐
小堂子这厢有礼了3 小时前
Chet.QuartzNet.UI v2.3.0 大更新!表格重构 + 系统配置 + 分析页全面升级!
前端·后端·ui·重构·c#·vue
youtootech12 小时前
HarmonyOS《柚兔学伴》项目实战09-待办列表 UI——List+ForEach+滑动删除
数据结构·ui·华为·list·harmonyos
FuckPatience19 小时前
WPF GridView 列绑定时前端没有属性提示
wpf
ndsc_d1 天前
前端实战复盘:用AI直接生成响应式官网落地页与React源码
前端·人工智能·react.js·ui·前端框架·aigc·paico
monsion1 天前
AG-UI 协议详解:Agent 与用户之间缺失的那一层
人工智能·ui·个人开发
界面开发小八哥1 天前
界面控件DevExpress WPF v26.1新版亮点 - 模板工具包 & MVVM功能全新升级
wpf·界面控件·devexpress·ui开发·.net 10
Full Stack Developme1 天前
flowable-spring-boot-starter 与 flowable-ui
ui
天天进步20151 天前
UI-TARS 源码解析 #5:prompt.py 解析:COMPUTER_USE、MOBILE_USE、GROUNDING 三种提示词模板
ui·prompt
一键生成网站1 天前
AI生成UI原型支持复杂逻辑交互工具对比与场景适配分析
人工智能·ui·交互·