How to bind dynamic resources to the DataGridStyle properties in MAUI DataGrid

In this article, we will show you how to bind dynamic resources to the DataGridStyle properties in Syncfusion .NET MAUI DataGrid (SfDataGrid). Dynamic resources provide an effective way to apply runtime styling to the DataGrid, allowing colors and visual settings to be updated automatically whenever the underlying resource values change. This approach is particularly useful when implementing themes, user-customizable appearances, brand-specific color schemes, or accessibility preferences.

In this sample, color resources are defined within the page resources and then applied to various DataGridStyle properties such as HeaderRowBackground, AlternateRowBackground, HeaderRowTextColor, and RowTextColor. By utilizing DynamicResource, the DataGrid can react to resource changes without requiring the control to be recreated. The grid is bound to an ObservableCollection<OrderInfo> and displays customer order information while using customized styling for headers and rows.

xaml

<ContentPage.Resources>
    <Color x:Key="rowcolor">lightblue</Color>
    <Color x:Key="headerTextColor">DarkBlue</Color>
    <Color x:Key="headerbackground">Beige</Color>
    <Color x:Key="rowTextColor">Green</Color>
</ContentPage.Resources>

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding OrderInfoCollection}">

    <syncfusion:SfDataGrid.DefaultStyle>
        <syncfusion:DataGridStyle
            HeaderRowBackground="{DynamicResource headerbackground}"
            AlternateRowBackground="{DynamicResource rowcolor}"
            HeaderRowTextColor="{DynamicResource headerTextColor}"
            RowTextColor="{DynamicResource rowTextColor}" />
    </syncfusion:SfDataGrid.DefaultStyle>

</syncfusion:SfDataGrid>

The ContentPage.Resources section contains color resources that can be reused throughout the page. These resources are applied to the DataGrid through the DynamicResource markup extension. The header row uses a beige background with dark blue text, while alternating rows use a light blue background to improve readability. The row text color is customized to provide a unique visual appearance for the grid.

C#

The following code initializes the DataGrid's data source using an ObservableCollection<OrderInfo>.

public OrderInfoRepository()
{
    orderInfo = new ObservableCollection<OrderInfo>();
    this.GenerateOrders();
}

The repository generates a collection of order records that are bound to the DataGrid through the page's BindingContext. Since ObservableCollection supports change notifications, updates to the collection are automatically reflected in the DataGrid UI.

Benefits of Using Dynamic Resources

• Centralizes color definitions in a single location.
• Simplifies maintenance and theme customization.
• Supports runtime updates without recreating the DataGrid.
• Improves application consistency by reusing shared resources.
• Enables light and dark theme implementations.
• Reduces duplication when applying the same style across multiple controls.

Customizable DataGridStyle Properties

The DataGridStyle class provides several appearance-related properties that can be bound using DynamicResource.

<syncfusion:DataGridStyle
    HeaderRowBackground="{DynamicResource headerbackground}"
    AlternateRowBackground="{DynamicResource rowcolor}"
    HeaderRowTextColor="{DynamicResource headerTextColor}"
    RowTextColor="{DynamicResource rowTextColor}" />

Using this approach, you can customize:

• Header row background color.
• Header row text color.
• Alternate row background color.
• Row text color.
• Selection appearance.
• Grid line colors and other visual elements.

Try It

1. Run the application.
2. Observe the customized header and row styling applied to the DataGrid.
3. Notice that alternate rows use a different background color for improved readability.
4. Modify the color resources in ContentPage.Resources.
5. Verify that the DataGrid automatically reflects the updated resource values.

Conclusion

I hope you enjoyed learning about how to bind dynamic resources to the DataGridStyle properties in .NET MAUI DataGrid (SfDataGrid).

You can refer to our .NET MAUI DataGrid’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!