CSS 在WPF Datagrid中使用触发器绑定单元格背景颜色

在本文中，我们将介绍如何使用CSS触发器绑定WPF Datagrid的单元格背景颜色。WPF（Windows Presentation Foundation）是一个用于构建Windows应用程序的框架，而Datagrid是WPF中用于显示和编辑数据的控件。

阅读更多：CSS 教程

什么是CSS触发器？

CSS触发器是CSS中的一个概念，它可以根据指定的条件来改变元素的样式。在WPF中，我们可以使用触发器来根据绑定的值来改变Datagrid单元格的背景颜色。

使用WPF Datagrid展示数据

首先，我们需要创建一个WPF应用程序，并在其XAML文件中添加一个Datagrid控件来展示数据。在这个例子中，我们将展示一个学生列表，包括姓名和年龄两列。

<Window x:Class="DataGridExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGrid Example" Height="450" Width="800">
    <Grid>
        <DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}" />
                <DataGridTextColumn Header="年龄" Binding="{Binding Age}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

在代码中，我们创建了一个DataGrid控件，并定义了两个列，分别用于展示学生的姓名和年龄。这些列会绑定到学生对象的Name和Age属性。

创建样式和触发器

接下来，我们需要在XAML文件中创建一个样式，用于设置Datagrid的单元格背景颜色。我们可以使用触发器来动态改变背景颜色。

<Window.Resources>
    <Style x:Key="CellStyle" TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="LightBlue"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightGray"/>
            </Trigger>
            <Trigger Property="DataGridCell.IsEditing" Value="True">
                <Setter Property="Background" Value="LightYellow"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

在代码中，我们创建了一个名为CellStyle的样式，并将其目标类型设置为DataGridCell。然后我们定义了三个触发器，分别根据单元格是否被选中、鼠标是否悬停在单元格上以及单元格是否处于编辑状态来改变单元格的背景颜色。

应用样式到Datagrid中的单元格

现在，我们需要将样式应用到Datagrid的单元格中。我们可以通过设置单元格的CellStyle属性来实现。

<Window x:Class="DataGridExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGrid Example" Height="450" Width="800">
    <Grid>
        <DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}" CellStyle="{StaticResource CellStyle}"/>
                <DataGridTextColumn Header="年龄" Binding="{Binding Age}" CellStyle="{StaticResource CellStyle}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

在代码中，我们将CellStyle应用到了Datagrid的两个列的CellStyle属性中，这样每个单元格都会使用我们定义的样式。

示例

接下来，我们来运行这个应用程序，并展示一些具体示例。假设我们有一个Student类，包含Name和Age两个属性，并创建一个Student列表作为Datagrid的数据源。

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        List<Student> students = new List<Student>()
        {
            new Student() { Name = "张三", Age = 18 },
            new Student() { Name = "李四", Age = 20 },
            new Student() { Name = "王五", Age = 22 }
        };

        dataGrid.ItemsSource = students;
    }
}

在运行应用程序后，我们可以看到Datagrid中的单元格背景颜色会根据定义的触发器来自动改变。当单元格被选中时，背景颜色会变为浅蓝色；当鼠标悬停在单元格上时，背景颜色会变为浅灰色；当单元格处于编辑状态时，背景颜色会变为浅黄色。