DataGridRow not highlighted when selected and hovered on

[trungnt2910]

Describe the bug

DataGridRow not highlighted when selected and hovered on.

To Reproduce

• Build the sample app.
• Go to the Data tab, scroll down until you see the "WPF UI DataGrid" sample.

Expected behavior

• The rows should be highlighed on hover and on click.

Screenshots

WPF.UI.2022-09-27.10-37-21.mp4

OS version

Windows 11 22H2

.NET version

.NET 6.0.401

WPF-UI NuGet version

Built from source, development branch commit 299a90e.

Additional context

This is due to the VisualStates for the WPFUI default DataGridRow style are not implemented:

wpfui/src/Wpf.Ui/Styles/Controls/DataGrid.xaml

Lines 226 to 371 in 299a90e

	<VisualState x:Name="Normal" />
	<!-- Provide a different appearance for every other row. -->
	<VisualState x:Name="Normal_AlternatingRow">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="Red" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="Red" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<!--
	In this example, a row in Editing or selected mode has an
	identical appearances. In other words, the states
	Normal_Selected, Unfocused_Selected, Normal_Editing,
	MouseOver_Editing, MouseOver_Unfocused_Editing,
	and Unfocused_Editing are identical.
	-->
	<VisualState x:Name="Normal_Selected">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<VisualState x:Name="Unfocused_Selected">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<VisualState x:Name="Normal_Editing">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<VisualState x:Name="MouseOver_Editing">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<VisualState x:Name="MouseOver_Unfocused_Editing">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<VisualState x:Name="Unfocused_Editing">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<VisualState x:Name="MouseOver">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<!--
	In this example, the appearance of a selected row
	that has the mouse over it is the same regardless of
	whether the row is selected. In other words, the states
	MouseOver_Editing and MouseOver_Unfocused_Editing are identical.
	-->
	<VisualState x:Name="MouseOver_Selected">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>
	<VisualState x:Name="MouseOver_Unfocused_Selected">
	<!--
	<Storyboard>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[0].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
	</ColorAnimationUsingKeyFrames>
	<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border" Storyboard.TargetProperty="(Panel.Background). (GradientBrush.GradientStops)[1].(GradientStop.Color)">
	<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
	</ColorAnimationUsingKeyFrames>
	</Storyboard>
	-->
	</VisualState>

I have a sample implementation based on the WindowsCommunityToolkit's DataGrid for UWP:

which gives this result:

The Windows Community Toolkit implementation basically:

• Sets the opacity to 0.8 on mouse hover, 0.6 on selected, and 0 otherwise.
• Sets the color to the system accent color on selected.

Note that unlike other WPFUI controls such as TreeViewItem, the sample DataGridRow implementation does not have a 0:0:0.16 animation duration. Everything happens instantly similar to the WCT DataGrid.

If the code and screenshot above seem appropriate please let me know so I can open a pull request with it.

[vmiwouter]

When i apply this fix the selected color seems too dark when the theme is on light and if you change it back and forth from dark/theme then its normal.

Dark doesn't seems to have this issue.

The grid text seems to to be aligned on top.
How can this be streched over the whole cell, so that its 'centered'?

[trungnt2910]

When i apply this fix the selected color seems too dark when the theme is on light and if you change it back and forth from dark/theme then its normal.

You can try to change the opacity in the VisualStateGroup and make it lighter.

The grid text seems to be aligned on top.
How can this be streched over the whole cell, so that its 'centered'?

Try editing the style, find any ContentPresenter you can see, and set the HorizontalContentAlignment and VerticalContentAlignment to Stretch.

[Agwebberley]

This should be implemented.

[blackier]

Will this style issue be resolved soon? Without this selected style, the datagrid is incomplete.

[SuperBrain]

@pomianowski is there a chance for this to get some attention please, or are you now fully focused on transferring WPF-UI to WPF?

I (and I guess many other devs) am using DataGrid a lot and having no selection highlight for me is a major obstacle, so I would really appreciate it if this got properly implemented.

[trungnt2910]

A fix has been implemented here, but someone will need to clean it up and open an actual PR.

Feel free to use that code in your own fork long as you put my name as a co-author in the commit.