.NET MAUI DataGrid Hover Cell

The Telerik UI for .NET MAUI DataGrid provides option to get the data of the cell that the mouse is currently over. In addition, you can change the default hover style. The feature is available only on Desktop - WinUI and MacCatalyst.

Getting the Hovered Cell

The DataGrid provides a VisualStateService property (of type DataGridVisualStateService). This property gets the service that handles visual-state related logic, such as keeping track of the element that the mouse is currently over.

The DataGridVisualStateService class encapsulates visual state related logic such as mouse-hovered elements within a Telerik.Maui.Controls.RadDataGrid instance. This class exposes the MouseHoverCell property (DataGridCellInfo) which allows you to get the cell that the mouse is currently over.

Here is an example how to get the hovered cell.

• C#

var hoveredCell = dataGrid.VisualStateService.MouseHoverCell;

Styling the Cell

You can specify the style for the cells and rows when the mouse is over by using the MouseHoverStyle property (of type DataGridBorderStyle) and applying the BackgroundColor, BorderColor, and BorderThickness properties.

Example

Here is an example of how to get the mouse-hovered cell and how to apply styles to the hovered row.

1. Define sample data:

• C#

public class PersonDetails
{
    public string Name { get; set; }
    public int Age { get; set; }
    public double Weight { get; set; }
    public Gender Gender { get; set; }
}

2. Define a sample ViewModel:

• C#

public class ViewModel : NotifyPropertyChangedBase
{
    private bool isReorderingEnabled = true;

    public ViewModel()
    {
        this.Data = new ObservableCollection<PersonDetails>
        {
            new PersonDetails { Name = "Juan", Age = 21, Gender = Gender.Male, Weight = 94.2 },
            new PersonDetails { Name = "Larry", Age = 22, Gender = Gender.Male, Weight = 68.9 },
            new PersonDetails { Name = "Tiffany", Age = 34, Gender = Gender.Female, Weight = 83 },
            new PersonDetails { Name = "Sebastian", Age = 16, Gender = Gender.Other, Weight = 72 },
            new PersonDetails { Name = "Bojidara", Age = 42, Gender = Gender.Female, Weight = 52 },
        };
    }

    public ObservableCollection<PersonDetails> Data { get; set; }

    public bool IsReorderingEnabled
    {
        get => this.isReorderingEnabled;
        set => this.UpdateValue(ref this.isReorderingEnabled, value);
    }
}

3. Define the DataGrid in XAML:

• XAML

<Grid RowDefinitions="Auto, *"
      RowSpacing="8">
    <telerik:RadBorder HeightRequest="40" 
                       BorderThickness="1"
                       Padding="10"
                       BorderColor="#DFDFDF">
        <Label x:Name="hoverCell" />
    </telerik:RadBorder>
    <telerik:RadDataGrid x:Name="dataGrid"
                         Grid.Row="1"
                         ItemsSource="{Binding Data}"
                         MouseHoverStyle="{StaticResource CellHoverStyle}">
        <telerik:RadDataGrid.BindingContext>
            <local:ViewModel />
        </telerik:RadDataGrid.BindingContext>
    </telerik:RadDataGrid>
</Grid>

4. Define the MouseHoverStyle in page's resources:

• XAML

<Style TargetType="telerik:DataGridMouseHoverAppearance" x:Key="CellHoverStyle">
    <Setter Property="BackgroundColor" Value="#B2D6D2" />
</Style>

5. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

6. Subscribe to the RadDataGrid.VisualStates.PropertyChanged:

• C#

this.dataGrid.VisualStateService.PropertyChanged += VisualStateService_PropertyChanged;

7. The VisualStates.PropertyChanged implementation with code how to get the MouseHoverCell:

• C#

private void VisualStateService_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(this.dataGrid.VisualStateService.MouseHoverCell))
    {
        var cellText = this.dataGrid.VisualStateService.MouseHoverCell;
        if(cellText != null)
        {
            this.hoverCell.Text = $"Hovered cell: {cellText.Value.ToString()}";
        }
    }
}

This is the result:

For the runnable DataGrid Mouse Hover Cell example, see the SDKBrowser Demo Application and go to DataGrid > Cells.