Change WPF DataGrid Row Color on Mouse Over

Tweet

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 :
 ObservableCollection<clsEmployee>
{
    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"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:src="clr-namespace:WPF_DataGrid_Property_Triggers"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources><src:EmployeeCollection

x:Key="EmpDs"></src:EmployeeCollection>
  <Style TargetType="{x:Type DataGridRow}">
   <Style.Triggers>
     <Trigger Property="IsMouseOver" Value="True">
       <Setter Property="Background" Value="Red" />
       <Setter Property="FontWeight" Value="ExtraBold" />
       <Setter Property="Height" Value="20" />
       </Trigger>
     </Style.Triggers>
    </Style>
</Window.Resources>
<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="*"
         ItemsSource="{Binding}">
        <DataGrid.Columns>
         <DataGridTextColumn Binding="{Binding EmpNo}"
 Header="EmpNo" />
           <DataGridTextColumn Binding="{Binding EmpName}"
 Header="EmpName" />
             <DataGridTextColumn Binding="{Binding Salary}"
 Header="Salary" />
              <DataGridTextColumn Binding="{Binding DeptNo}"
 Header="DeptNo" />
         </DataGrid.Columns>
    </DataGrid>
</Grid>
</Window>

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:

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.