dotnet
Fluent2: DataGrid ColumnHeader is Not Sortable
Description
The Fluen2 DataGrid style has A LOT of issues. Styling is one of them #9562. However, another major one is the column headers don't support sorting indicators.
This is a deeper issue as the Fluent theme doesn't have an implementation of DataGridHeaderBorder which all other themes like Aero2 include.
It looks like this control hard-codes in C# background colors. This is especially problematic.
Reproduction Steps
Try to sort a vanilla Fluent2 styled DataGrid. If you look at the styles you can also see it is missing the mechanism to even support sort indicators in the XAML.
https://github.com/dotnet/wpf/blob/43f4bc532d89c017567d1ba9842ffee4c439a6b8/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/DataGrid.xaml#L369-L379
Expected behavior
Sorting indicator arrows are needed for all columns.
Actual behavior
No sorting arrows
Regression?
No response
Known Workarounds
No response
Impact
No response
Configuration
No response
Other information
No response
Also this seems to be a bug. It should be using the Brush NOT Color
https://github.com/dotnet/wpf/blob/43f4bc532d89c017567d1ba9842ffee4c439a6b8/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/DataGrid.xaml#L362
@dipeshmsft Please take a look at this one. It is a special case with DataGridHeaderBorder hard-coding brushes in C# directly. This breaks the design of the Fluent theme and will require some special considerations and thought.
https://github.com/dotnet/wpf/blob/43f4bc532d89c017567d1ba9842ffee4c439a6b8/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Aero2/Microsoft/Windows/Themes/DataGridHeaderBorder.cs#L112-L141
@robert-abeo, we will have to take a deep dive into DataGrid, I will take a look at this.
@robert-abeo this won't be an issue. The other themes used this DataGridHeaderBorder control in DataGridColumnHeader style whereas we won't use that control in Fluent style, so I think we can find some way to deal with this.
@dipeshmsft Again, the DataGrid header seems to require this DataGridHeaderBorder to properly manage sorting indicators. If I look at the source code there is a lot of other functionality there as well.
You may be able to work-around the sorting indicators by setting a DataTrigger in the style based on SortDirection for the column; however, that isn't done right now. Sorting indicators are completely non-functional.
I suspect a lot of the other functionality is there fore a reason as well.
@robert-abeo I am working on this currently. Will update you once I have some more information on this.
@robert-abeo you can see a preview of the datagrid changes here in this PR : Restyled DataGrid and component controls This is still to be reviewed internally and once done I will raise it here for review from community.
@dipeshmsft Thanks, will look at it in more detail later. Some initial thoughts just looking at the images:
- IMO it is more similar to the old Aero2 style rather than the Fluent2 look-and-feel (Fluent2 would look more similar to Fluent UI Blazor library as noted in #9562, #10445)
- The headers (due to background) are difficult to distinguish from the rest of the content IMO. In my own styling these were changed to standard button background/border brushes (ControlFillColorDefault, ControlFillColorSecondary for PointerOver and ControlFillColorTertiary for Pressed. These match Button)
- You are placing the row selection indicator "pill" in the row header -- which may itself be disabled and hidden. So this can't work in the general sense
- In my testing a solid background actually was better for selection because:
- It allows for alternating row backgrounds in more cases (without visual confusion)
- It allows a pointer-over background to be much more visually different
- The existing Fluent2 DataGrid selection style matches what was done for ListBox (i.e. it's similar to Aero2 rather than the new Fluent2 ListView/ComboBox). The reasons for that are likely the same.
For reference here is what a custom "Fluent2" styled DataGrid looks like on my end.
Thanks for these points, I will try to incorporate them during the internal discussion.
@robert-abeo
IMO it is more similar to the old Aero2 style rather than the Fluent2 look-and-feel (Fluent2 would look more similar to Fluent UI Blazor library as noted in https://github.com/dotnet/wpf/issues/9562, https://github.com/dotnet/wpf/issues/10445)
Regarding this, what are the things that you are talking about ? If you are talking about margin and padding, fixing that would cause inconsistencies in the editing mode, as the textbox loaded in data grid, is code generated and it will require a lot of workarounds to fix the fluent style loading for datagrid elements.
The headers (due to background) are difficult to distinguish from the rest of the content IMO. In my own styling these were changed to standard button background/border brushes (ControlFillColorDefault, ControlFillColorSecondary for PointerOver and ControlFillColorTertiary for Pressed. These match Button)
Let me try out other colors here.
You are placing the row selection indicator "pill" in the row header -- which may itself be disabled and hidden. So this can't work in the general sense
I have added color change for the whole row when the selection is made, so there is visual feedback even if header's visibility is hidden. I can modify the colors of the row, but making it like Fluent may need serious changes in data grid.
as the textbox loaded in data grid, is code generated and it will require a lot of workarounds to fix the fluent style loading for datagrid elements.
If the editable controls are fully generated by code then nevermind -- it is what it is. I would prefer a styling a little closer to Fluent overall but we will manage this on our end with custom styles.
DataGrid fundamentally was not a well designed control in some areas. It is hard-coded things that go against WPF lookless control principles.
I have added color change for the whole row when the selection is made, so there is visual feedback even if header's visibility is hidden. I can modify the colors of the row, but making it like Fluent may need serious changes in data grid.
I think changing the whole row background on selection is the best option. That is what is done on our side. We can't use Fluent's selection pill concept here for above reasons.
Closing this issue as the corresponding PR has been merged. Moving other DataGrid related comments to the main issue #10445.