Using AppThemeBinding for SfDataGrid.GridStyle or GridTextColumn.CellStyle throws InvalidCastException

[Andrew Hoke]

I am using AppThemeBinding in my XAML pages and resource dictionaries to style my app based on the current theme. I have read the documentation surrounding using the GridStyle property of SfDataGrid to provide grid-level styles and the CellStyle property of the various grid column definitions like GridTextColumn.

It seems that the SfDataGrid does not handle AppThemeBinding extensions and throws an InvalidCastException when trying to apply the cell style to a GridCell:

<Style x:Key="SfGridCellStyle" ="sfdg:GridCell">

<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={x:StaticResource BackgroundColorLight}, Dark={StaticResource BackgroundColorDark}}" />

<Setter Property="Foreground" Value="{AppThemeBinding Light={StaticResource TextColorLight}, Dark={StaticResource TextColorDark}}" />

<Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource BorderColorLight}, Dark={StaticResource BorderColorDark}}" />

</Style>

Column definitions:

<sfdg:SfDataGrid.Columns>

<sfdg:GridTextColumn MappingName="Name" />

<sfdg:GridTextColumn HeaderText="Sales Stage" MappingName="Stage" />

<sfdg:GridTextColumn HeaderText="Last Activity Date" MappingName="LastActivityDate" />

</sfdg:SfDataGrid.Columns>

Additionally, the cell styles do not apply uniformly: I have supplied a ForegroundColor that should be white in dark mode with a dark background color but the actual result is white text on a white background, which is unreadable:

When using a GridTemplateColumn and specifying the same CellStyle, the background color applies correctly, but the template contents (a stack layout with an image and a label) do not display:

[Andrew Hoke]

I'm having difficulty editing the text above since random parts disappear when I click edit so I will make an addendum here: In my column definitions, I have not specified the CellStyle attribute. Doing so causes the app to crash with the InvalidCastException, so the only way I can capture a screenshot of the grid appearing incorrectly is by disabling the cell styles and relying on the grid styles which don't seem to crash the app when using AppThemeBinding.

[Karthikraja Kalaimani]

Hi Andrew,

Thank you for contacting Syncfusion support. 

We have checked the reported issue "InvalidCastException occurs when apply color using AppThemeBinding to properties of GridCell". Currently, we are validating your requirement. So, we will update the further details on or before 23rd August 2021. We appreciate your patience until then. 

Regards,
Karthik Raja

[Karthikraja Kalaimani]

Hi Andrew, 

Thanks for your patience.

We have checked the reported issue in our end. We have logged a bug report for the reported issue "InvalidCastException occurs when use AppThemeBinding for GridCell". We will fix the issue and include the fix in our weekly nuget which is scheduled on 7th September 2021. We will let you know once it is released with the fix. We appreciate your patience until then.

You can also track the status of the report from the below link. 

https://www.syncfusion.com/feedback/28123/invalidcastexception-occurs-when-use-appthemebinding-for-gridcell

Regards,
Karthik Raja

[Karthikraja Kalaimani]

Hi Andrew,

We are glad to let you know that we have fixed the reported issue and included the fix in our weekly NuGet update version 19.2.0.60 which is available for download (nuget.org).  

 

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance.

Regards,
Karthik Raja 

[Andrew Hoke]

Hi Karthik,

I can confirm the issue has been fixed; however, when changing the system theme from light to dark or dark to light while a grid is displayed, the grid does not reflect the correct colors for the current theme after changing.

This theme change can be easily responded to using a standard documented Xamarin pattern and it would be greatly appreciated if the SfDataGrid could be further updated to support responding to app theme changes at runtime.

[Karthikraja Kalaimani]

Hi Andrew, 

Thanks for your feedback. Please let us know if you need further assistance from us. 

Regards,
Karthik Raja

[Andrew Hoke]

Is this a change that the team is willing to make, or am I left telling users to restart the app to see their theme changes? Some SyncFusion controls do respond to app theme changes, and others don't. It's very frustrating to have such inconsistencies.

[Karthikraja Kalaimani]

Hi Andrew, 

Sorry for the inconvenience caused. 

We are able to reproduce the reported issue "Device theme not reflected to SfDataGrid". Currently, we are checking the possibilities to achieve your requirement in our source. So, we will update the further details on or before 14th September 2021. We appreciate your patience until then. 

Regards,
Karthik Raja

[Karthikraja Kalaimani]

Hi Andrew, 

Thanks for your patience. 

We have checked the reported issue in SfDataGrid and we found a workaround to the apply the device theme to SfDataGrid without restarting the application. Please refer to the below code snippets to remove the SfDataGrid from parent and then add the SfDataGrid to stack RequestedThemeChanged event. 

Code snippet :  

 public MainPage() 

        { 

            InitializeComponent(); 

            Application.Current.RequestedThemeChanged += Current_RequestedThemeChanged; 

            this.dataGrid.GridStyle = new CustomStyle(); 

            this.dataGrid.SelectionChanging += DataGrid_SelectionChanging; 

            this.dataGrid.QueryCellStyle += DataGrid_QueryCellStyle; 

        } 

  

        private void Current_RequestedThemeChanged(object sender, AppThemeChangedEventArgs e) 

        { 

            Application.Current.UserAppTheme = e.RequestedTheme; 

            stack.Children.Remove(dataGrid); 

            stack.Children.Add(dataGrid); 

        } 

 
Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGridDemo-1384962767.zip

Regards,
Karthik Raja 

[Andrew Hoke]

Thanks for looking into it, but I don't want to have to apply this workaround in every place we use SfDataGrids. We also use pure MVVM so I don't name my views or work on them from code-behind.

[Karthikraja Kalaimani]

Hi Andrew, 

Thanks for the update. 

We would like to let you know that you can achieve your requirement using GridTemplateColumn. In GridTemplateColumn you can load a custom StackLayout with Label and then apply app theme binding to the TextColor property of that Label and  BackgroundColor property of that StackLayout like the below code snippets. For more details, please refer to the below code snippets and attached sample. 

Code snippets : 

 <ContentPage.Resources>

        <ResourceDictionary>

            <Style TargetType="local:CustomStackLayout">

                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=White, Dark=Black}" />

            </Style>

            <Style TargetType="local:CustomLabel">

                <Setter Property="TextColor" Value="{AppThemeBinding Light=Black, Dark=Blue}" />

            </Style>

            <Style TargetType="syncfusion:GridCell">

                <Setter Property="BorderColor" Value="{AppThemeBinding Light=Pink, Dark=Blue}" />

            </Style>

            <Style TargetType="Button">

                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Yellow, Dark=Blue}" />

            </Style>

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.BindingContext>

        <local:Datas x:Name="viewModel" />

    </ContentPage.BindingContext>

    <ContentPage.Content>

        <StackLayout x:Name="stack">

            <Button Text="ClickToScroll" Clicked="Button_Clicked"></Button>

            <syncfusion:SfDataGrid x:Name="dataGrid" SelectionMode="Single" AllowEditing="True" NavigationMode="Cell" AutoGenerateColumns="False" ItemsSource="{Binding mycollect}" ColumnSizer="Star">

                <syncfusion:SfDataGrid.Columns>

                    <syncfusion:GridTemplateColumn MappingName="No_1">

                        <syncfusion:GridTemplateColumn.CellTemplate>

                            <DataTemplate>

                                <local:CustomStackLayout VerticalOptions="Center">

                                    <local:CustomLabel HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding No_1}"></local:CustomLabel>

                                </local:CustomStackLayout>

                            </DataTemplate>

                        </syncfusion:GridTemplateColumn.CellTemplate>

                    </syncfusion:GridTemplateColumn>

                    <syncfusion:GridTemplateColumn MappingName="No_2">

                        <syncfusion:GridTemplateColumn.CellTemplate>

                            <DataTemplate>

                                <local:CustomStackLayout VerticalOptions="Center">

                                    <local:CustomLabel HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding No_2}"></local:CustomLabel>

                                </local:CustomStackLayout>

                            </DataTemplate>

                        </syncfusion:GridTemplateColumn.CellTemplate>

                    </syncfusion:GridTemplateColumn>

                    <syncfusion:GridTemplateColumn MappingName="Text">

                        <syncfusion:GridTemplateColumn.CellTemplate>

                            <DataTemplate>

                                <local:CustomStackLayout VerticalOptions="Center">

                                    <local:CustomLabel HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding Text}"></local:CustomLabel>

                                </local:CustomStackLayout>

                            </DataTemplate>

                        </syncfusion:GridTemplateColumn.CellTemplate>

                    </syncfusion:GridTemplateColumn>

                </syncfusion:SfDataGrid.Columns>

            </syncfusion:SfDataGrid>

        </StackLayout>

    </ContentPage.Content>

....

 public class CustomStackLayout : StackLayout

    {

   

    }

    public class CustomLabel : Label

    {

   

    }

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGridDemo-560647319.zip

Please let us know if you face any difficulties to implement the workaround in your application. 

Regards,
Karthik Raja

[Andrew Hoke]

Yes I suppose that does work but, again, this is a workaround and not a really permanent solution. There are plenty of workarounds, but I'd like a permanent solution.

[Karthikraja Kalaimani]

Hi Andrew, 

Thanks for the update. 

Currently, we are validating the issue in source level. We will validate and update the further details on or before 27th September 2021. We appreciate your patience until then. 

Regards,
Karthik Raja

[Karthikraja Kalaimani]

Hi Andrew,

Thanks for your patience. 

We have checked the reported issue in our end. We have logged a bug report for the reported issue "System theme not reflected to grid cell properties when use AppThemeBinding". We will fix the issue and include the fix in our weekly nuget which is scheduled on 5th Oct 2021. We will let you know once it is released with the fix. We appreciate your patience until then.

You can also track the status of the report from the below link. 
https://www.syncfusion.com/feedback/28975/system-theme-not-reflected-to-gridcell-properties-when-use-apptheme-binding

Regards,
Karthik Raja

[Suja Venkatesan]

Hi Andrew, 

Sorry for the delay caused. 

Regarding issue “System theme not reflected to grid cell properties when use AppThemeBinding”. 

We regret to inform you that due to complexity in fixing the issue, We could not include the fix in our weekly nuget release as promised. We will fix the reported issue and include it in our upcoming release which is planned to roll out on October 12, 2021 we appreciate your patience until then. We will let you know once it gets release with fix. 

Regards, 

Suja. 

[Andrew Hoke]

That's ok! I'll look forward to the update then. Thank you :)

[Suja Venkatesan]

Hi Andrew, 

Thanks for the update. 

We will let you know once the weekly NuGet is released with the fix . We appreciate your patience and understanding. 

Regards, 

Suja. 

[Suja Venkatesan]

Hi Andrew, 

We have included the fix for the issue “System theme not reflected to grid cell properties when use AppThemeBinding” in our latest Weekly Nuget release update version 19.3.0.45 which is available for download . 

Please let us know if you need further assistance. 

Regards, 

Suja.