目录
- 引言
- 项目结构与准备工作
- XAML布局设计
- 后台代码实现
- 视图模型设计
- 总结
引言
在许多应用场景中,我们需要在表格中选择多行数据进行批量操作,如删除、导出等。为了提高用户体验,通常会在表格的第一列添加一个复选框,允许用户逐个或批量选择数据项。本文将详细介绍如何在 WPF 中使用 DataGrid
实现这一功能,并特别关注如何实现全选功能。
运行效果
项目结构与准备工作
首先,确保您的项目已经包含了以下必要的文件和引用:
- MainWindow.xaml:主界面布局文件。
- MainWindow.xaml.cs:主界面的代码隐藏文件。
- MainViewModel.cs:视图模型类,用于处理业务逻辑和数据绑定。
- PackingScanRemoveModel.cs:数据模型类,表示每条数据记录。
接下来,我们将逐步介绍如何实现这些功能。
XAML布局设计
1. 定义样式资源
在 Window.Resources
中定义一些样式资源,包括 DataGridRow
样式、全选复选框样式和文本块样式。
<Window.Resources>
<!-- 定义 DataGridRow 的样式 -->
<Style x:Key="GraySelectionRowStyle" TargetType="DataGridRow">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- 定义全选复选框的样式 -->
<Style x:Key="HeaderCheckBoxStyle" TargetType="CheckBox">
<EventSetter Event="Checked" Handler="OnHeaderCheckBoxChecked"/>
<EventSetter Event="Unchecked" Handler="OnHeaderCheckBoxUnchecked"/>
</Style>
<!-- 定义文本块的样式 -->
<Style x:Key="CenteredTextBlockStyle" TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="FontSize" Value="15"/>
</Style>
</Window.Resources>
2. 配置 DataGrid
接下来,在 Grid
布局中配置 DataGrid
,并设置其属性和样式。
<DataGrid Grid.Row="1" Background="Transparent" HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding PackingScanRemoves}" CanUserAddRows="False" AutoGenerateColumns="false"
Margin="0 0 0 5" AlternationCount="2" RowStyle="{StaticResource GraySelectionRowStyle}">
<DataGrid.ColumnHeaderSty