Using CSS Triggers to Bind Cell Background Color in WPF Datagrid

In this article, we’ll show you how to use CSS triggers to bind the cell background color of a WPF Datagrid. WPF (Windows Presentation Foundation) is a framework for building Windows applications, and the Datagrid is a control in WPF for displaying and editing data.

Read more: CSS Tutorial

What are CSS Triggers?

A CSS trigger is a concept in CSS that changes the style of an element based on specified conditions. In WPF, we can use a trigger to change the background color of a DataGrid cell based on a bound value.

Using WPF Datagrid Displaying Data

First, we need to create a WPF application and add a Datagrid control to its XAML file to display data. In this example, we will display a list of students, including two columns: name and age.

<Window x_Class="DataGridExample.MainWindow" 
 
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="Name" Binding="{Binding Name}" /> 
<DataGridTextColumn Header="Age" Binding="{Binding Age}" /> 
</DataGrid.Columns> 
</DataGrid> </Grid>
</Window>

In the code, we create a DataGrid control and define two columns to display the student’s name and age. These columns are bound to the Name and Age properties of the Student object.

Creating a Style and Trigger

Next, we need to create a style in the XAML file to set the background color of the DataGrid cells. We can use a trigger to dynamically change the background color.

<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>

In the code, we create a style named CellStyle and set its target type to DataGridCell. We then define three triggers to change the cell’s background color based on whether the cell is selected, whether the mouse is hovering over the cell, and whether the cell is in edit mode.

Applying Styles to Datagrid Cells

Now, we need to apply the style to the Datagrid cells. We can do this by setting the CellStyle property of the cell.

<Window x_Class="DataGridExample.MainWindow" 
 
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="Name" Binding="{Binding Name}" CellStyle="{StaticResource CellStyle}"/> 
<DataGridTextColumn Header="Age" Binding="{Binding Age}" CellStyle="{StaticResource CellStyle}"/> 
</DataGrid.Columns> </DataGrid>

</Grid>

</Window>

In the code, we apply the CellStyle property to the two columns of the DataGrid. This way, each cell will use the style we defined.

Example

Next, let’s run this application and show some concrete examples. Suppose we have a Student class with two properties, Name and Age, and create a Student list as the data source for a 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;
}
}

After running the application, we can see that the cell background color in the Datagrid automatically changes according to the defined trigger. When a cell is selected, the background color changes to light blue; when the mouse hovers over the cell, the background color changes to light gray; and when the cell is in edit mode, the background color changes to light yellow.

Summary

In this article, we demonstrated how to use CSS triggers to dynamically change the background color of cells in a WPF Datagrid. We created a style and used triggers to dynamically change the background color of cells based on the selected state, mouse hover state, and edit state. This provides more flexible control over the appearance of cells in the Datagrid. I hope this article helps you understand and use CSS triggers.