Responsive Gridview Column Headers

Question

I am trying to add a header for each column associated with my gridview, such that when the page is wide enough to display multiple rows of items, a column header should be displayed at the top of each column and be removed if the page is shrunk so that the column no longer fits.

The end result would look something like this: 2 columns with headers

And when resized it would dynamically update to this: 1 column with 1 header

Answer 1

Check the DataGrid control which is a new addition to the Windows Community Toolkit. This is ideal for display of table-like data. You can then use AdaptiveTriggers to hide columns depending on the width of the window (by setting DataGridTextColumn.Visibility to Collapsed)