Highlight DataGrid Cell On MouseMove Event In WPF

Introduction

This article describes how to highlight a DataGrid cell on a MouseOver event. Here I use styles for highlighting the DataGrid cell containing some element upon a MouseOver event. This is easily done using a property called a trigger in WPF.

Triggers in Styles

A Trigger defines a list of actions to be fired when the specified condition is matched. There are two types of triggers in WPF.

Property Triggers : Property trigger get fired when a property gets a specified value.
Event Triggers : Event trigger defines a mechanism through that triggers animated change in a property.

Step 1

The simplest way to create a WPF Application is with Microsoft Visual Studio 2010:

Open Visual Studio 2010.
Launch the New Project dialog box.
Select the WPF project type with a WPF application template.
Assign the project name and click "OK" to create the new project.

Step 2

Now we use a DataGrid tool from the toolbox as in the following:

Go to the "View" -> "Toolbox".
Then Drag and Drop a DataGrid on the design view.
Add the following source code in MainWindow.xaml:

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<DataGrid AutoGenerateColumns="True" Height="441"

HorizontalAlignment="Left" Margin="41,16,0,0" Name="itemSales"

VerticalAlignment="Top" Width="597" ColumnWidth="*" CanUserAddRows="False" Grid.RowSpan="2" />

</Grid>

Step 3

Now go the MainWindows.cs and write the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;

namespace Change_apperence

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

private void Window_Loaded(object sender, RoutedEventArgs e)

{

itemSales.ItemsSource = new ProductsSalesCollection();

}

public class itemsSales

{

public string itemsName { get; set; }

public int a1 { get; set; }

public int a2 { get; set; }

public int a3 { get; set; }

public int a4 { get; set; }

}

public class ProductsSalesCollection : ObservableCollection<itemsSales>

{

public ProductsSalesCollection()

{

Add(new itemsSales() { itemsName = "sofa", a1 = 2500, a2 = 3200, a3 = 8722, a4 = 10000 });

Add(new itemsSales() { itemsName = "tv", a1 = 5400, a2 = 1300, a3 = 2900, a4 = 5000 });

Add(new itemsSales() { itemsName = "Radio", a1 = 2500, a2 = 7300, a3 = 5900, a4 = 8000 });

Add(new itemsSales() { itemsName = "tabel", a1 = 1400, a2 = 9300, a3 = 9200, a4 = 1200 });

Add(new itemsSales() { itemsName = "Bad", a1 = 5400, a2 = 5200, a3 = 2500, a4 = 1200 });

Add(new itemsSales() { itemsName = "mobile", a1 = 1500, a2 = 4200, a3 = 2722, a4 = 1000 });

Add(new itemsSales() { itemsName = "washing mashine", a1 = 5100, a2 = 2300, a3 = 2200, a4 = 500 });

Add(new itemsSales() { itemsName = "Radio", a1 = 2500, a2 = 6300, a3 = 5800, a4 = 8000 });

Add(new itemsSales() { itemsName = "Ac", a1 = 1400, a2 = 9300, a3 = 9200, a4 = 1000 });

Add(new itemsSales() { itemsName = "laptop", a1 = 5400, a2 = 5200, a3 = 1500, a4 = 9200 });

}

Step 4

Again open the WindowMain.xaml and add code for the style.

<Window.Resources>

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

The final source code of the WindowsMain.xaml is:

<Window x:Class="change_apperence.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="459" Width="707" Loaded="Window_Loaded">