Datagrid styles not rendering properly when Page NavigationCacheMode is set to "Required"

[c4rlosmarin]

Describe the bug

The Datagrid styles are not rendering properly after changing the current theme.

I used the template studio for winui to generate a base project that includes the datagrid page. I then added a NavigationCacheMode="Required" line to the page xaml, and the transparent color for the column header background, the xaml looks like the following:

<Page x:Class="myWinUIBaseProject.Views.DataGridPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls" NavigationCacheMode="Required" mc:Ignorable="d"> </Page>

<Grid x:Name="ContentArea"> <controls:DataGrid AutoGenerateColumns="False" GridLinesVisibility="Horizontal" ItemsSource="{x:Bind ViewModel.Source, Mode=OneWay}"> <controls:DataGrid.Resources> <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundColor" Color="Transparent" /> </controls:DataGrid.Resources> <controls:DataGrid.Columns> <!-- TODO: Replace column definitions to match real data. Consider adding Header values to Resources.resw. --> <controls:DataGridTextColumn Binding="{Binding OrderID}" Header="OrderID" /> <controls:DataGridTextColumn Binding="{Binding OrderDate}" Header="OrderDate" /> <controls:DataGridTextColumn Binding="{Binding Company}" Header="Company" /> <controls:DataGridTextColumn Binding="{Binding ShipTo}" Header="ShipTo" /> <controls:DataGridTextColumn Binding="{Binding OrderTotal}" Header="OrderTotal" /> <controls:DataGridTextColumn Binding="{Binding Status}" Header="Status" /> <controls:DataGridTemplateColumn Header="Symbol"> <controls:DataGridTemplateColumn.CellTemplate> <DataTemplate> <FontIcon HorizontalAlignment="Left" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="{Binding Symbol}" AutomationProperties.Name="{Binding SymbolName}" /> </DataTemplate> </controls:DataGridTemplateColumn.CellTemplate> </controls:DataGridTemplateColumn> </controls:DataGrid.Columns> </controls:DataGrid> </Grid>

After executing the app, opening the Datagrid page and switching the application theme from Light to Dark, the Datagrid shows a black column header background color instead of a transparent one. Something similar happens while going from the Dark theme to the Light one, it shows a white column header background color instead of a transparent one.

By just hovering the mouse cursor over the column headers, the background color goes back to transparent by itself

Regression

No response

Reproducible in sample app?

• This bug can be reproduced in the sample app.

Steps to reproduce

1. Create a new project using the Template Studio for WinUI
2. Make sure to add a DataGridPage to the project using the assistant
3. Once the project is created, open the DataGridPage and add NavigationCacheMode-"Required" to the page element
4. Add the following to the Datagrid control to set the background color to transparent:

<controls:DataGrid.Resources>
    <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundColor" Color="Transparent" />
</controls:DataGrid.Resources>

5. Run the application
6. Navigate to the DataGrid page
7. Navigate to the Settings page and change the current theme from light to dark
8. Navigate to the DataGrid page
9. You will see the black background color for the column headers instead of having a transparent one

Expected behavior

The Datagrid should show the proper background color for the column headers after the current theme is changed while having the NavigationCacheMode page property set to "Required"

Screenshots

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

Windows 11 23H2 (Build 22631)

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Other (specify)

Other SDK version

Minimum: Windows 11, version 23H2 (Build 22621); Target Version: Windows 11, version 24H2 (Build 26100)

Visual Studio Version

2022

Visual Studio Build Number

17.11.1

Device form factor

Desktop

Nuget packages

Microsoft.Extensions.Hosting {8.0.0} myWinUIBaseProject
CommunityToolkit.WinUI.UI.Controls {7.1.2} myWinUIBaseProject
CommunityToolkit.WinUI.UI.Animations {7.1.2} myWinUIBaseProject
Microsoft.Xaml.Behaviors.WinUI.Managed {2.0.9} myWinUIBaseProject
Microsoft.WindowsAppSDK {1.5.240802000} myWinUIBaseProject
WinUIEx {2.3.4} myWinUIBaseProject
CommunityToolkit.WinUI.UI.Controls.DataGrid {7.1.2} myWinUIBaseProject
CommunityToolkit.Mvvm {8.2.2} myWinUIBaseProject
Newtonsoft.Json {13.0.2} myWinUIBaseProject.Core

Additional context

No response

Help us help you

No.