We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

chartgradientstop not updating color set to DynamicResource

I have the following XAML as part of a SfChart


<chart:areaseries.colormodel>

<chart:chartcolormodel palette="Custom">

<chart:chartcolormodel.customgradientcolors>

<chart:chartgradientcolor startpoint="0.5,1" endpoint="0.5,0">

<chart:chartgradientcolor.gradientstops>

<chart:chartgradientstop offset=".1" color="{DynamicResource PageSecondaryBackgroundColor}">

<chart:chartgradientstop offset="1" color="{DynamicResource ColorLightBlue}">

</chart:chartgradientstop></chart:chartgradientstop></chart:chartgradientcolor.gradientstops>

</chart:chartgradientcolor>

</chart:chartcolormodel.customgradientcolors>

</chart:chartcolormodel>

</chart:areaseries.colormodel>


The color of the chartgradientstop is set to a DynamicResource. If the DynamicResource is changed during runtime (switching between dark and light mode) the color property doesn't update. All other properties linked to a DynamicResource updates as expected. Maybe someone forgot to wire the binding of the color property?


2 Replies

VT Vimala Thirumalai Kumar Syncfusion Team November 16, 2022 02:11 AM

Hi Jens Woeste,

We would like to let you know that we can achieve your requirement by setting DynamicResource to the CustomGradientColors property of the ChartColorModel. Please find the code snippet and example sample in the attachment for your reference.

<chart:SfChart.Resources>

                    <chart:ChartGradientColorCollection x:Key="gradient">

                        <chart:ChartGradientColor  StartPoint="0.5,1" EndPoint="0.5, 0">

                            <chart:ChartGradientColor.GradientStops>

                                <chart:ChartGradientStop Color="Aqua" Offset= "0"/>

                                <chart:ChartGradientStop Color="#1976D2" Offset= "1"/>

                            </chart:ChartGradientColor.GradientStops>

                        </chart:ChartGradientColor>

                    </chart:ChartGradientColorCollection>

 

                    <chart:ChartGradientColorCollection x:Key="gradient1">

                        <chart:ChartGradientColor  StartPoint="0.5,1" EndPoint="0.5, 0">

                            <chart:ChartGradientColor.GradientStops>

                                <chart:ChartGradientStop Color="Red" Offset= "0"/>

                                <chart:ChartGradientStop Color="Orange" Offset= "1"/>

                            </chart:ChartGradientColor.GradientStops>

                        </chart:ChartGradientColor>

                    </chart:ChartGradientColorCollection>

 </chart:SfChart.Resources>

 

      <chart:AreaSeries.ColorModel>

              <chart:ChartColorModel Palette="Custom" CustomGradientColors="{DynamicResource gradient}"/>

      </chart:AreaSeries.ColorModel>


Regards,

Vimala Thirumalai Kumar.


Attachment: ChartSample_bac72546.zip


JW Jens Woeste November 16, 2022 06:34 AM

It doesn't work.


Another illustration:

add the following to your xaml:

<ContentPage.Resources>

        <ResourceDictionary>

            <Color x:Key="DarkStop">Yellow</Color>

            <Color x:Key="LightStop">Red</Color>

            <Color x:Key="StopColor">Red</Color>

        </ResourceDictionary>

  </ContentPage.Resources>


Now modify the XAML to use DynamicResource StopColor

<chart:ChartGradientColor.GradientStops>

                                <chart:ChartGradientStop Color="{DynamicResource StopColor}" Offset= "0.1"/>

                                <chart:ChartGradientStop Color="#1976D2" Offset= "1"/>

 </chart:ChartGradientColor.GradientStops>


and modify the code behind:

private void Button_Clicked(object sender, EventArgs e)

        {

            //chart.Resources["gradient"] = chart.Resources["gradient1"];

            if(Resources["StopColor"] == Resources["DarkStop"])

                Resources["StopColor"] = Resources["LightStop"];

            else

                Resources["StopColor"] = Resources["DarkStop"];

        }


It seems like the ChartGradientStop property is not bound correctly (INotifyPropertyChanged).

This example works for other color properties.


Thanks


Jens


Loader.
Live Chat Icon For mobile
Up arrow icon