Change WPF DataGrid Row Color on Mouse Over

In this short code snippet, I will explain how to change the look of the WPF DataGrid row display on a Mouse action (in this example, on MouseOver). In WPF using Style, the display and the behavior of any element can be changed by defining user input actions. The WPF styling and templating model enables you to specify triggers within your Style - known as PropertyTriggers. In this demo I have used a WPF DataGrid.

I have created a WPF 4.0 Application with following two classes:

public class clsEmployee
public int EmpNo { get; set; }
public string EmpName { get; set; }
public int Salary { get; set; }
public int DeptNo { get; set; }

public class EmployeeCollection :
public EmployeeCollection()
Add(new clsEmployee() { EmpNo = 101, EmpName = "Ajay",
Salary = 56000, DeptNo = 10 });
Add(new clsEmployee() { EmpNo = 102, EmpName = "Vijay",
Salary = 46000, DeptNo = 20 });
Add(new clsEmployee() { EmpNo = 103, EmpName = "Bijay",
Salary = 26000, DeptNo = 30 });
Add(new clsEmployee() { EmpNo = 104, EmpName = "Sujay",
Salary = 16000, DeptNo = 40 });
Add(new clsEmployee() { EmpNo = 1051, EmpName = "Sanjay",
Salary = 36000, DeptNo = 50 });

The EmployeeCollection class is registered in the MainPage.Xaml to instantiate bind with the Grid element. The XAML code is shown below:

<Window x:Class="WPF_DataGrid_Property_Triggers.MainWindow"
Title="MainWindow" Height="350" Width="525">

<Style TargetType="{x:Type DataGridRow}">
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
<Setter Property="FontWeight" Value="ExtraBold" />
<Setter Property="Height" Value="20" />
<Grid DataContext="{Binding Source={StaticResource EmpDs}}">
<DataGrid AutoGenerateColumns="False" Height="237"
HorizontalAlignment="Left" Margin="18,66,0,0" Name="dgEmp"
VerticalAlignment="Top" Width="466" ColumnWidth="*"
<DataGridTextColumn Binding="{Binding EmpNo}"
Header="EmpNo" />
<DataGridTextColumn Binding="{Binding EmpName}"
Header="EmpName" />
<DataGridTextColumn Binding="{Binding Salary}"
Header="Salary" />
<DataGridTextColumn Binding="{Binding DeptNo}"
Header="DeptNo" />

The style defines trigger elements which acts when the user does a MouseOver on the DataGridRow. When this actions is satisfied, the look of the DataGrid Row will change. Run the application and the following result will be displayed:


Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

1 comment:

Mike L said...

Nice. What about if your datagrid has an AlternatingRowBackground brush set? In that case, the style trigger seems to lose out on rendering the red background on rows where there is an alternating color.