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

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?

			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal