How To Align Data Cell Values With Header Cells In Winui Datagrid (Sfdatagrid)?

In WinUI DataGrid (SfDataGrid), When padding is applied to GridHeaderCellControl and GridCell using Style, the padding for the GridCell is not updated correctly. This happens because the display control applies internal padding within the GridColumn. As a result, the padding set on the GridCell through styles is not reflected as expected.

To overcome this, set the padding directly on the GridColumn to 0. This ensures that the padding is applied and updated correctly.

XML

<dataGrid:SfDataGrid.Columns>
    <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" Padding="0"/>
</dataGrid:SfDataGrid.Columns>

Alternatively, you can set the display control’s padding to 0 by customizing the GridCellTextBoxRenderer and overriding the OnInitializeDisplayElement method.

C#

 this.sfDataGrid.CellRenderers.Remove("TextBox");
 this.sfDataGrid.CellRenderers.Add("TextBox", new GridCellTextBoxRendererExt());

 public class GridCellTextBoxRendererExt : GridCellTextBoxRenderer
 {
     public override void OnInitializeDisplayElement(DataColumnBase dataColumn, TextBlock uiElement, object dataContext)
     {
         base.OnInitializeDisplayElement(dataColumn, uiElement, dataContext);
         uiElement.Padding = new Thickness(0);
     }
 }

Note: You need to customize the renderer based on the column type being used.

Take a moment to peruse the WinUI DataGrid - Columns documentation, to learn more about columns and it's types.