Gradient pointer

[Hüseyin]

https://help.syncfusion.com/xamarin/circular-gauge/pointers#setting-animation-for-pointer

How do I gradient the orange pointer of the gauge in this example?

[Ramya Soundar Rajan]

Hi Hüseyin, 

 

Greeting from Syncfusion, 

 

Currently we don’t have gradient support for range pointer. We have already logged the feature request for this support. Please find the link below, 

https://www.syncfusion.com/feedback/1052/gradient-color-support-for-rangepointer-in-circular-gauge 

 

 However, you can achieve this requirement by using gradient color for ranges as shown in the below code. 

 

XAML: 

 

        <gauge:SfCircularGauge> 

 

        <gauge:SfCircularGauge.Scales> 

 

            <gauge:Scale   RimColor="LightGray" RimThickness="30" RadiusFactor="1" ShowTicks="False" 

                               StartValue="0" EndValue="100" Interval="10" LabelOffset="0.75" LabelColor="#424242" 

                              LabelFontSize ="15" > 

                    <gauge:Scale.Pointers> 

 

                        <gauge:NeedlePointer Thickness="7" LengthFactor="0.55" Color="LightGray" 

                                             KnobColor="White" TailColor="LightGray" TailLengthFactor="0.2" 

                                             Type="Triangle"  KnobRadius="12" Value="80" 

                                             AnimationDuration="5" TailStrokeWidth="2" TailStrokeColor="LightGray" 

                                             KnobStrokeColor="LightGray" KnobStrokeWidth="8"/> 

 

                    </gauge:Scale.Pointers> 

 

                    <gauge:Scale.Ranges> 

                        <gauge:Range StartValue="0" EndValue="50" Thickness="30"  Offset="1"> 

                            <gauge:Range.GradientStops> 

                                <gauge:GaugeGradientStop Color="Yellow" Value="0"/> 

                                <gauge:GaugeGradientStop Color="Red" Value="30"/> 

                                <gauge:GaugeGradientStop Color="Blue" Value="50"/> 

                            </gauge:Range.GradientStops> 

                        </gauge:Range> 

                    </gauge:Scale.Ranges> 

 

                </gauge:Scale> 

 

        </gauge:SfCircularGauge.Scales> 

 

    </gauge:SfCircularGauge> 

 

Screenshot: 

 

Please refer the KB link to apply gradient color for ranges below, 

https://www.syncfusion.com/kb/10505/how-to-apply-gradient-color-for-ranges-in-xamarin-forms-sfcirculargauge 

We have prepared the sample by applying gradient for range. Please refer the sample link below, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CircularGauge(I150044)1480519599.zip  

Thanks, 

Ramya S 

[Hüseyin]

you are wonderful. thank you.

[Rachel A]

Hi Hüseyin, 

 

Thanks for the feedback. 

 

Regards, 

Rachel.