Remove Hover Effect on Specific Rows or Cells

[Tyler]

I have two different datagrids where I would like to restrict the hover effect to certain rows/cells. The first is a datagrid with row based selection, where first row is not selectable. The other is a datagrid with cell based selection, where the blank cells are not selectable. In both cases, I'm using a CellDecorationStyleSelector to give these non-selectable areas a unique background, but I can't seem to find a way to disable their hover effect. I know how to disable the hover effect for the whole datagrid--which is a potential backup plan--but I would like to keep the hover effect on the selectable areas if possible. Thanks for any help!

[Lance | Senior Manager Technical Support]

Hi Tyler,

Have you tried the Style in the Hover Control section of the Implicit Styling documentation article? This will be applied to both row and cell selection modes.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Tyler]

Hi Lance,

Thanks for sharing that link. I was actually already using that same implicit styling code for the overall datagrid's hover effect. Is there some way to apply it differently to specific cells/rows, though? I only want cells that the user can interact with to have the hover effect. They only way I know to selectively style cells/rows is through CellContentStyleSelector and CellDecorationStyleSelector, but those only affect foreground and background, respectively, not the hover effect. Thanks again for your thoughts on this, and please let me know if I'm missing something here.

[Lance | Senior Manager Technical Support]

Hi Tyler,

Thank you for the additional context. The DataGridHoverControl has no concept of the data context of the cell/row, you'll need to implement this on the cell template level in your custom template (outside of the DataGrid API).

For example using Composition API or use the VisualStateManager on the template's contents (simple example below) or use XamlBehaviors


Example 

Here's an example of using a custom storyboard animation. First, make sure the opacity of the hover control is 0 so that your custom animation is the only visible coloring:

<grid:RadDataGrid.Resources>
    <Style TargetType="primitives:DataGridHoverControl">
        <Setter Property="Opacity"
             Value="0" />
    </Style>
</grid:RadDataGrid.Resources>

Then you can set up your cell content template elements with a custom animation:

<grid:DataGridTemplateColumn>
    <grid:DataGridTemplateColumn.CellContentTemplate>
        <DataTemplate>
            <Grid PointerEntered="Grid_PointerEntered"
                  PointerExited="Grid_PointerExited">
                <Grid.Background>
                    <SolidColorBrush x:Name="myGridBackground" Color="Transparent" />
                </Grid.Background>
                <Grid.Resources>
                    <Storyboard x:Name="EnterStoryboard">
                        <ColorAnimation From="Transparent"
                                        To="OrangeRed"
                                        Duration="0:0:1"
                                        Storyboard.TargetName="myGridBackground"
                                        Storyboard.TargetProperty="Color" />
                    </Storyboard>
                    <Storyboard x:Name="ExitStoryboard">
                        <ColorAnimation From="OrangeRed"
                                        To="Transparent"
                                        Duration="0:0:1"
                                        Storyboard.TargetName="myGridBackground"
                                        Storyboard.TargetProperty="Color" />
                    </Storyboard>
                </Grid.Resources>

                <StackPanel HorizontalAlignment="Center">
                    <TextBlock Text="Name"/>
                    <TextBlock Text="{Binding Name}" />
                    <TextBlock Text="IsEditable"/>
                    <TextBlock Text="{Binding IsEditable}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </grid:DataGridTemplateColumn.CellContentTemplate>
</grid:DataGridTemplateColumn>

Here are the event handlers that fire the storyboards depending on the value of the DataContext

private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    if (sender is Grid grid && grid.DataContext is Person person)
    {
        if (person.IsEditable)
        {
            Storyboard sb = grid.Resources["EnterStoryboard"] as Storyboard;
            sb.Begin();
        }
    }
}

private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
    if (sender is Grid grid && grid.DataContext is Person person)
    {
        if (person.IsEditable)
        {
            Storyboard sb = grid.Resources["EnterStoryboard"] as Storyboard;
            sb.Begin();
        }
    }
}

In the demo above, the Person model and view model are defined as:

public class ViewModel
{
    public ObservableCollection<Person> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Person>()
        {
            new Person() { Name = "Anna",IsEditable = true},
            new Person() { Name = "Tom"},
            new Person() { Name = "Jack", IsEditable = true},
            new Person() { Name = "Emmy"}
        };
    }
}

public class Person
{
    public string Name { get; set; }
    public bool IsEditable { get; set; }
}

Summary

There are a bunch of different ways you can do this, Storyboards are just one. However, each of them are just general UWP programming approached are reside outside the control of Telerik components, you'll need to decide on which is best for your scenario.

I hope this helps!

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Lance | Senior Manager Technical Support]

Hello Tyler,

Sorry for the double reply, just noticed I had the wrong storyboard name in the Exit event handler, it should be ExitStoryboard

 

private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
{
    if (sender is Grid grid && grid.DataContext is Person person)
    {
        if (person.IsEditable)
        {
            Storyboard sb = grid.Resources["ExitStoryboard"] as Storyboard;
            sb.Begin();
        }
    }
}

Now the demo will work as expected :)

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Tyler]

Thank you Lance! That does indeed work. I appreciate you spelling out that example for me!