Repository navigation
DataGrid in the Windows 10 and WinUI look - #4715
Merged
Merged
Conversation
Colours and sizes come from the DataGrid of the Windows Community Toolkit for the Windows 10 look and from the TableView of microsoft-ui-xaml for the WinUI one. The Win10 header takes the theme background where the toolkit takes the page colour, which would turn it black in a dark theme.
MahApps.Styles.DataGrid.Win10 gives its header, row header, row, cell and editors their look itself, so the set needs one line and a grid on the Metro style keeps the Metro look. The editors take the cell padding back with a negative margin, which keeps a check box in place when its cell goes into edit. The select-all button gets its style under its resource key, so the Metro template stays the only one.
Read off the TableView: a tinted header row, the accent pill beside a selected row, a rounded frame and the small chevrons for sorting. A name in the header trims before the sort glyph, and an element in it is still shown as the element. The first header on screen draws no leading line, also when the first column is collapsed or moved, so DataGridHelper keeps track of the first visible column.
The grid hands its group header over through GroupItemHelper, and only while the view shows groups. Until now the helper added a GroupStyle to every list it watched, grouped or not, and each of them built its rows a second time after loading, ListView.Win10 and WinUI included. A GroupStyle the application brings still wins. The Metro grid uses the existing MahApps.Styles.GroupItem.DataGrid, which now shows the name of the group when no HeaderTemplate is given. The setters use DynamicResource, so an application can swap a header by its key.
The corner above the bar stayed empty in every DataGrid style, so the fill and the rule under the headers stopped short of the edge. A header without a column now fills it in the grid's own ColumnHeaderStyle, and while it is there the filler draws no line where the bar begins.
…button A grid that changes sets builds its column headers anew, and the dropped ones get the new style once more. Their padding binding found no DataGrid above them and logged warning 4 for every header. ColumnHeaderPadding is inherited already, so the headers now bind it on themselves. The select all button takes its width from CellsPanelHorizontalOffset, which dips a fraction below zero while the thumb of a grid with a frozen column is dragged, and each of those values logged error 5. NonNegativeDoubleConverter puts it at zero.
The slide was bound on X and Y of a TranslateTransform in the template. A Freezable has no element to look names up from when it is first bound, so the first expander logged binding error 2 six times. The binding now sits on RenderTransform of the content site, and ExpanderContentSlideConverter returns the whole transform.
The page shows one look at a time, picked with the style set switch, in three cards modelled on the TableView page of the WinUI Gallery: a basic table with three-step sorting and a frozen first column, filtering and grouping with buttons to open and close all groups, and template cells with a monogram, a status badge, a timeline and a rating. The rows are programming languages. The Azure card is gone, since the page no longer shows the looks side by side.
punker76
force-pushed
the
feat/datagrid-win10-winui
branch
from
October 25, 2026 09:51
0cddc15 to
5e407d2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Win10 and WinUI sets apply
MahApps.Styles.DataGrid.Win10andMahApps.Styles.DataGrid.WinUI. The Windows 10 grid follows the DataGrid of the Windows Community Toolkit, the WinUI one the TableView of microsoft-ui-xaml, and colours and sizes come from their resources. The grid gives its headers, rows, cells and editors their look itself, so a keyed grid looks the same outside the set and a grid on the Metro style keeps the Metro look.All three grids bring a group header along through
GroupItemHelper.GroupContainerStyle, only while the view is grouped and the grid has noGroupStyleof its own. The setters useDynamicResource, so an application can swap a header by its key.DataGridHelper.TracksFirstVisibleColumnmarks the first column on screen withIsFirstVisibleColumn, so the WinUI header draws no leading line when the first column is hidden or moved.Some older bugs are fixed on the way. The header row goes on over the vertical scroll bar in every grid style. The content slide of the Expander, the column header padding after a change of style and the select all button of a grid with a frozen column no longer log binding errors.
The DataGrid page of the gallery follows the TableView samples of the WinUI Gallery, with sorting, filtering, grouping and a frozen column, one look at a time.