Personalize Your WinUI DataGrid: Quick and Simple Customization Techniques
Tags: winui, datagrid, development, desktop
Published: 2023-06-05 16:19:40

---
title: Personalize Your WinUI DataGrid: Quick and Simple Customization Techniques
published: true
date: 2023-06-05 11:57:37 UTC
tags: winui, datagrid, development, desktop
canonical_url: https://www.syncfusion.com/blogs/post/winui-datagrid-customization.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nhsorlz060sq2nx1mxm.png
---
Syncfusion WinUI controls support [light and dark themes](https://help.syncfusion.com/winui/common/themes "Themes for Syncfusion WinUI controls"). The [WinUI DataGrid’s](https://www.syncfusion.com/winui-controls/datagrid "WinUI DataGrid") appearance can be further customized by changing the text color, font, font size, headers, and gridlines to match your application’s theme. Additionally, you can add custom styles for selected rows and cells to provide visual cues to the user.

In this blog, we will explore the appearance customization options in WinUI DataGrid by using the [theme resource keys](https://help.syncfusion.com/winui/common/themes#theme-resource "Theme resource in WinUI DataGrid"). With these keys, we can customize every element of the DataGrid.

We are going to see the appearance customizations possible with the following elements:

- [DataRow](#DataRow)
- [HeaderRow](#HeaderRow)
- [StackedHeaderRow](#StackedHeaderRow)
- [SelectionRow](#SelectionRow)
- [TableSummaryRow](#TableSummaryRow)
- [GroupSummaryRow](#GroupSummaryRow)
- [CaptionSummaryRow](#CaptionSummaryRow)
- [GroupDropArea and GroupDropAreaItem](#GroupDropArea) 
- [AddNewRow](#AddNewRow)
- [Unbound Row](#Unbound%20Row)
- [Row Header](#RowHeader)

## <a name="DataRow">DataRow customization</a>

We can customize the record row’s background and foreground. Use the **SyncfusionDataGridRowControlForeground** and **SyncfusionDataGridRowControlBackground** keys to customize the background and foreground. Refer to the following code snippet:

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="623"
                     Height="360"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="False"
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionGridHeaderCellControlBackground" Color="DarkBlue"/>
  <SolidColorBrush x:Key="SyncfusionGridHeaderCellControlForeground" Color="LightPink"/>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Rows-in-WinUI-DataGrid.png" alt="Customizing Rows in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Rows in WinUI DataGrid</figcaption>

</figure>

##<a name="HeaderRow">HeaderRow customization</a>

Customize the HeaderRow using the keys **SyncfusionGridHeaderCellControlBackground** and **SyncfusionGridHeaderCellControlForeground**. Refer to the following code snippet:

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="623"
                     Height="360"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="False"
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionGridHeaderCellControlBackground" Color="Red"/>
  <SolidColorBrush x:Key="SyncfusionGridHeaderCellControlForeground" Color="White"/>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Header-Rows-in-WinUI-DataGrid.png" alt="Customizing Header Rows in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Header Rows in WinUI DataGrid</figcaption>

</figure>

## <a name="SelectionRow">Selection color customization
</a>

You can customize the [WinUI DataGrid’s](https://www.syncfusion.com/winui-controls/datagrid "WinUI DataGrid") selection colors and current cell border using the direct APIs [SelectionBackground](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_SelectionBackground "SelectionBackground property of WinUI DataGrid"), [SelectionForeground](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_SelectionForeground "SelectionForeground property of WinUI DataGrid"), [CurrentCellBorderBrush](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Grids.SfGridBase.html#Syncfusion_UI_Xaml_Grids_SfGridBase_CurrentCellBorderBrush "CurrentCellBorderBrush property of WinUI DataGrid"), and [CurrentCellBorderThickness](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Grids.SfGridBase.html#Syncfusion_UI_Xaml_Grids_SfGridBase_CurrentCellBorderThickness "CurrentCellBorderThickness property of WinUI DataGrid"). We can achieve the same customizations by using the **SyncfusionDataGridRowSelectedBackground** , **SyncfusionDataGridRowSelectedForeground** , **SyncfusionDataGridCurrentCellBorderBrush** , and **SyncfusionDataGridCurrentCellBorderThickness** keys as well. Refer to the following code snippet:

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="623"
                     Height="360"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="False"
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionDataGridRowSelectedBackground" Color="DarkGray"/>
  <SolidColorBrush x:Key="SyncfusionDataGridRowSelectedForeground" Color="White"/>
  <SolidColorBrush x:Key="SyncfusionDataGridCurrentCellBorderBrush" Color="DarkBlue"/>
  <Thickness x:Key="SyncfusionDataGridCurrentCellBorderThickness">3</Thickness>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Selection-Colors-in-WinUI-DataGrid.png" alt="Customizing Selection Colors in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Selection Colors in WinUI DataGrid</figcaption>

</figure>

##<a name="StackedHeaderRow">Stacked headers customization</a>

Customize the [stacked header](https://help.syncfusion.com/winui/datagrid/stacked-headers "Stacked Headers in WinUI DataGrid") style using the **SyncfusionGridStackedHeaderCellControlBackground** and **SyncfusionGridStackedHeaderCellControlForeground** keys.

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="623"
                     Height="389"
                     ColumnWidthMode="Auto"
                     AutoGenerateColumns="False"                             
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.StackedHeaderRows>
  <grid:StackedHeaderRow>
   <grid:StackedHeaderRow.StackedColumns>
    <grid:StackedColumn ChildColumns="OrderID" HeaderText="Order Details" />
    <grid:StackedColumn ChildColumns="CustomerID,CustomerName" HeaderText="Customer Details" />
    <grid:StackedColumn ChildColumns="ShipCity,Country" HeaderText="Shipping Details" />        
   </grid:StackedHeaderRow.StackedColumns>
  </grid:StackedHeaderRow>
 </dataGrid:SfDataGrid.StackedHeaderRows>
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionGridStackedHeaderCellControlBackground" Color="Red"/>
  <SolidColorBrush x:Key="SyncfusionGridStackedHeaderCellControlForeground" Color="White"/>
  <SolidColorBrush x:Key="SyncfusionGridHeaderCellControlBackground" Color="Red"/>
  <SolidColorBrush x:Key="SyncfusionGridHeaderCellControlForeground" Color="White"/>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID”/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>

```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Stacked-Headers-in-WinUI-DataGrid.png" alt="Customizing Stacked Headers in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Stacked Headers in WinUI DataGrid</figcaption>

</figure>

##<a name="GroupDropArea">Group drop area customization</a>

You can group column data by dragging and dropping columns in the group drop area. The group drop area and its items can be customized with the keys **SyncfusionGroupDropAreaBackground** , **SyncfusionGroupDropAreaForeground** , **SyncfusionGroupDropAreaItemBackground** , **SyncfusionGroupDropAreaItemForeground** , **SyncfusionGroupDropAreaItemBorderBrush** , **SyncfusionDataGridGroupDropAreaItemIconFill** , and **SyncfusionDataGridGroupDropAreaItemSortIconFill**. Refer to the following code snippet:

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="623"
                     Height="389"
                     AllowGrouping="True"
                     ColumnWidthMode="Auto"
                     ShowGroupDropArea="True"
                     AutoGenerateColumns="False"                             
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionGroupDropAreaBackground" Color="Yellow"/>
  <SolidColorBrush x:Key="SyncfusionGroupDropAreaForeground" Color="DarkGreen"/>
  <SolidColorBrush x:Key="SyncfusionGroupDropAreaItemBackground" Color="LightGreen"/>
  <SolidColorBrush x:Key="SyncfusionGroupDropAreaItemForeground" Color="DarkBlue"/>             
  <SolidColorBrush x:Key="SyncfusionGroupDropAreaItemBorderBrush" Color="SkyBlue"/>
  <SolidColorBrush x:Key="SyncfusionDataGridGroupDropAreaItemIconFill" Color="DarkBlue"/>
  <SolidColorBrush x:Key="SyncfusionDataGridGroupDropAreaItemSortIconFill" Color="DarkBlue"/>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-the-Group-Drop-Area-in-WinUI-DataGrid.png" alt="Customizing the Group Drop Area in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing the Group Drop Area in WinUI DataGrid</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/06/Customizing-the-Group-Drop-Area-Items-in-WinUI-DataGrid.png" alt="Customizing the Group Drop Area Items in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing the Group Drop Area Items in WinUI DataGrid</figcaption>

</figure>

##Summary customization

The [WinUI DataGrid](https://www.syncfusion.com/winui-controls/datagrid "WinUI DataGrid") allows you to customize summary rows with keys. Summary rows display totals, averages, or other aggregate values for a group of rows in the DataGrid.

###<a name="CaptionSummaryRow">Caption summary</a>

Customize the appearance of the caption summary rows by using the keys **SyncfusionCaptionSummaryRowControlForeground** , **SyncfusionDataGridGroupExpanderIconFill** , and **SyncfusionDataGridGroupExpanderFontSize**. Refer to the following code snippets:

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="653"
                     Height="300"
                     ColumnWidthMode="Auto"
                     AllowGrouping="True"
                     ShowGroupDropArea="True"
                     AutoGenerateColumns="False"                             
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.GroupColumnDescriptions>
  <dataGrid:GroupColumnDescription ColumnName="Country"/>
 </dataGrid:SfDataGrid.GroupColumnDescriptions>
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionCaptionSummaryRowControlForeground" Color="DarkBlue"/>
  <SolidColorBrush x:Key="SyncfusionDataGridGroupExpanderIconFill" Color="DarkBlue"/>
  <x:Double x:Key="SyncfusionDataGridGroupExpanderFontSize">12</x:Double>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
id>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Summary-in-WinUI-DataGrid.png" alt="Customizing Summary in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Summary in WinUI DataGrid</figcaption>

</figure>

###<a name="GroupSummaryRow">Group summary customization</a>

Customize the appearance of the group summary rows by using the keys **SyncfusionGroupSummaryRowControlBackground** and **SyncfusionGroupSummaryRowControlForeground**.

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="653"
                     Height="430"
                     ColumnWidthMode="Auto"
                     AllowGrouping="True"
                     ShowGroupDropArea="True"
                     AutoGenerateColumns="False"                             
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.GroupColumnDescriptions>
  <dataGrid:GroupColumnDescription ColumnName="Country"/>
 </dataGrid:SfDataGrid.GroupColumnDescriptions>
 <dataGrid:SfDataGrid.GroupSummaryRows>
  <dataGrid:GridSummaryRow ShowSummaryInRow="False">
   <dataGrid:GridSummaryRow.SummaryColumns>
    <dataGrid:GridSummaryColumn Name="OrderCount"
                                Format="'Count – {Count:d}'"
                                MappingName="Country"
                                SummaryType="CountAggregate" />
   </dataGrid:GridSummaryRow.SummaryColumns>
  </dataGrid:GridSummaryRow>
 </dataGrid:SfDataGrid.GroupSummaryRows>
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionGroupSummaryRowControlBackground" Color="Pink"/>
  <SolidColorBrush x:Key="SyncfusionGroupSummaryRowControlForeground" Color="DarkBlue"/> 
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
id>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Group-Summary-in-WinUI-DataGrid.png" alt="Customizing Group Summary in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Group Summary in WinUI DataGrid</figcaption>

</figure>

###<a name="TableSummaryRow">Table summary customization</a> 

Customize the table summary rows using the **SyncfusionTableSummaryRowControlBackground** and **SyncfusionTableSummaryRowControlForeground** keys.

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                      Width="620"
                      Height="410"
                      ColumnWidthMode="Auto"
                      AllowGrouping="True"
                      ShowGroupDropArea="True"
                      AutoGenerateColumns="False"                             
                      ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.TableSummaryRows>
  <dataGrid:GridTableSummaryRow ShowSummaryInRow="True" Title="Total Product Count: {OrderCount}">
   <dataGrid:GridSummaryRow.SummaryColumns>
    <dataGrid:GridSummaryColumn Name="OrderCount"
                                Format="'{Count:d}'"
                                MappingName="OrderID"
                                SummaryType="CountAggregate" />
   </dataGrid:GridSummaryRow.SummaryColumns>
  </dataGrid:GridTableSummaryRow>
 </dataGrid:SfDataGrid.TableSummaryRows>
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionTableSummaryRowControlBackground" Color="LightBlue"/>
  <SolidColorBrush x:Key="SyncfusionTableSummaryRowControlForeground" Color="HotPink"/>                
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Table-Summary-in-WinUI-DataGrid.png" alt="Customizing Table Summary in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Table Summary in WinUI DataGrid</figcaption>

</figure>

###<a name="AddNewRow">AddNewRow customization</a>

The [WinUI DataGrid](https://www.syncfusion.com/winui-controls/datagrid "WinUI DataGrid") allows you to add new rows at runtime by using the [AddNewRowPosition](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_AddNewRowPosition "AddNewRowPosition property of WinUI DataGrid") property. You can customize the appearance of the [add new row area](https://help.syncfusion.com/winui/datagrid/crud-operations#add-new-rows "Add new row in WinUI DataGrid") by using the **SyncfusionAddNewRowControlBackground** and **SyncfusionAddNewRowControlForeground** keys.

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="620"
                     Height="390"
                     ColumnWidthMode="Auto"
                     AddNewRowPosition="Top"
                     AutoGenerateColumns="False"                             
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionAddNewRowControlBackground" Color="LightGreen"/>
  <SolidColorBrush x:Key="SyncfusionAddNewRowControlForeground" Color="DeepPink"/>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Add-New-Row-Area-in-WinUI-DataGrid.png" alt="Customizing Add New Row Area in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Add New Row Area in WinUI DataGrid</figcaption>

</figure>

##<a name="Unbound%20Row">Unbound row customization</a>

[Unbound rows](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_UnboundRows "UnboundRows property of WinUI DataGrid") in the DataGrid refer to rows not bound to any data source or model. These rows can be used to display additional information to the user. You can customize their appearance by using the **SyncfusionUnboundRowControlBackground** and **SyncfusionUnboundRowControlForeground** keys.

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                      Width="620"
                      Height="390"
                      ColumnWidthMode="Auto"                             
                      AutoGenerateColumns="False"                             
                      ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.UnboundRows>
  <dataGrid:GridUnboundRow Position="Top"/>
 </dataGrid:SfDataGrid.UnboundRows>
 <dataGrid:SfDataGrid.Resources>
  <SolidColorBrush x:Key="SyncfusionUnboundRowControlBackground" Color="SkyBlue"/>
  <SolidColorBrush x:Key="SyncfusionUnboundRowControlForeground" Color="DeepPink"/>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```

**C#**

```csharp
this.sfDataGrid.QueryUnboundRow += SfDataGrid_QueryUnboundRow;

private void SfDataGrid_QueryUnboundRow(object sender, GridUnboundRowEventsArgs e)
{
    if (e.UnboundAction == UnboundActions.QueryData)
    {
        if (e.RowColumnIndex.ColumnIndex == 3)
        {
            e.Value = “Total Orders:”;
            e.Handled= true;
        }
        else if (e.RowColumnIndex.ColumnIndex == 4)
        {
            e.Value = (this.sfDataGrid.View.Records.Count).ToString();
            e.Handled= true;
        }
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Unbound-Rows-in-WinUI-DataGrid.png" alt="Customizing Unbound Rows in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Unbound Rows in WinUI DataGrid</figcaption>

</figure>

##<a name="RowHeader">Row header customization</a>

In the [WinUI DataGrid](https://www.syncfusion.com/winui-controls/datagrid "WinUI DataGrid"), a row header is a column that displays a unique identifier for each row in the grid. By default, the [row header](https://help.syncfusion.com/winui/datagrid/rows#row-header "Row header in WinUI DataGrid") column displays icons based on the row type. You can customize these icons’ colors and the row header color by using the keys **SyncfusionGridRowHeaderCellBackground** , **SyncfusionGridRowHeaderIndentCellBackground,** and **SyncfusionDataGridRowHeaderCellCurrentRowIconFill**.

**XAML**

```xml
<dataGrid:SfDataGrid x:Name="sfDataGrid"
                     Width="650"
                     Height="350"
                     ColumnWidthMode="Auto" 
                     ShowRowHeader="True"
                     AutoGenerateColumns="False"                             
                     ItemsSource="{Binding Orders}">
 <dataGrid:SfDataGrid.Resources> 
  <SolidColorBrush x:Key="SyncfusionGridRowHeaderCellBackground" Color="Gray"/>
  <SolidColorBrush x:Key="SyncfusionGridRowHeaderIndentCellBackground" Color="Gray"/>
  <SolidColorBrush x:Key="SyncfusionDataGridRowHeaderCellCurrentRowIconFill" Color="White"/>
 </dataGrid:SfDataGrid.Resources>
 <dataGrid:SfDataGrid.Columns>
  <dataGrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
  <dataGrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID”/>
  <dataGrid:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>
  <dataGrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>
  <dataGrid:GridTextColumn MappingName="Country" HeaderText="Country"/>
 </dataGrid:SfDataGrid.Columns>
</dataGrid:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-Row-Headers-in-WinUI-DataGrid.png" alt="Customizing Row Headers in WinUI DataGrid" style="width:100%">

  <figcaption>Customizing Row Headers in WinUI DataGrid</figcaption>

</figure>

## References

For more details, refer to the [WinUI DataGrid theme resource files](https://github.com/syncfusion/winui-controls-theme-resource-files/tree/master/Syncfusion.SfGrid.WinUI "WinUI DataGrid theme resource files on GitHub") and our [customization demo](https://github.com/SyncfusionExamples/Easy-way-to-customize-the-appearance-of-WinUI-DataGrid "Customizing the WinUI DataGrid GitHub demo") on GitHub.

## Conclusion

Thanks for reading! In this blog, we learned about how easily we can customize the appearance of the [Syncfusion WinUI DataGrid](https://www.syncfusion.com/winui-controls/datagrid "Syncfusion WinUI DataGrid") elements. Customizing the DataGrid elements with keys can greatly enhance the user experience and improve the readability of data. Try this feature and share your experience with it in the comment section below.

For current Syncfusion customers, the newest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "Essential Studio licence and downloads page"). If you are not a customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to check out these features. If you have questions, contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [feedback](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal") portal, or [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"). We are always happy to assist you!

## Related blogs

- [Introducing the New WinUI AvatarView Control](https://www.syncfusion.com/blogs/post/winui-avatarview-control.aspx "Blog: Introducing the New WinUI AvatarView Control")
- [How to Synchronize Outlook Calendar Events with Syncfusion WinUI Scheduler](https://www.syncfusion.com/blogs/post/synchronize-outlook-calendar-events-with-syncfusion-winui-scheduler.aspx "Blog: How to Synchronize Outlook Calendar Events with Syncfusion WinUI Scheduler")
- [Implement Fuzzy Search in Syncfusion WinUI AutoComplete](https://www.syncfusion.com/blogs/post/fuzzy-search-in-winui-autocomplete.aspx "Blog: Implement Fuzzy Search in Syncfusion WinUI AutoComplete")
- [Introducing the New WinUI MaskedTextBox Control](https://www.syncfusion.com/blogs/post/introducing-the-new-winui-maskedtextbox-control.aspx "Blog: Introducing the New WinUI MaskedTextBox Control")