Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DataGridRow not highlighted when selected and hovered on #410

Open
trungnt2910 opened this issue Sep 27, 2022 · 6 comments
Open

DataGridRow not highlighted when selected and hovered on #410

trungnt2910 opened this issue Sep 27, 2022 · 6 comments
Labels
bug Something isn't working ⭐ top bug Top bug. ⭐ top issue Top issue.

Comments

@trungnt2910
Copy link
Contributor

trungnt2910 commented Sep 27, 2022 •
edited
Loading

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:
image

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.
@trungnt2910 trungnt2910 added the bug Something isn't working label Sep 27, 2022
trungnt2910 added a commit to trungnt2910/X410Launcher that referenced this issue Sep 27, 2022
@trungnt2910
fix: Home page PackagesDataGrid bugs
47ea833 
- `DataGridRow`s are now highlighted on mouse click and select by
adding a custom style that fixes
(lepoco/wpfui#410)
- `PackagesDataGrid` now does not overflow the home page and instead
properly displays a scroll bar.

- Also fixed a misc nullability warning in MainWindow.xaml.cs
trungnt2910 added a commit to trungnt2910/wpfui that referenced this issue Sep 27, 2022
@trungnt2910
fix: Implement VisualState for DataGridRow
fee40de 
Added implementation based on Windows Community Toolkit's DataGrid
control.

Should fix lepoco#410.
@vmiwouter
Copy link

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
Copy link
Contributor Author

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
Copy link

This should be implemented.

@blackier
Copy link

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

@SuperBrain
Copy link

@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
Copy link
Contributor Author

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.

@stepwise-alan stepwise-alan mentioned this issue Aug 8, 2024
Open
7 tasks
@github-actions github-actions bot added ⭐ top issue Top issue. ⭐ top bug Top bug. labels Dec 7, 2024
@github-actions github-actions bot mentioned this issue Dec 7, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working ⭐ top bug Top bug. ⭐ top issue Top issue.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@SuperBrain @blackier @Agwebberley @vmiwouter @trungnt2910