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>

<RowDefinition Height="84" />

<RowDefinition Height="370" />

</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 });