Category / Section
How to apply gradient color for ranges in Xamarin.Forms SfCircularGauge
1 min read
SfCircularGauge contains a collection of scales, and each scale contains sub elements such as ranges, pointers, and labels.
Ranges contain a collection of range elements, and each range begins and ends at the specified values within a scale. You can apply the gradient color to a range element using the GradientStops property to give smooth color transition.
The following code sample demonstrates how to apply the gradient color to a range element in circular gauge.
XAML
<gauge:Scale.Ranges> <gauge:Range EndValue="100" Offset="1"> <gauge:Range.GradientStops> <gauge:GaugeGradientStop Color="Yellow" Value="0"/> <gauge:GaugeGradientStop Color="Red" Value="50"/> <gauge:GaugeGradientStop Color="Blue" Value="100"/> </gauge:Range.GradientStops> </gauge:Range> </gauge:Scale.Ranges>
C#
Scale scale = new Scale();
Range range = new Range();
range.EndValue = 100;
range.Offset = 1;
range.GradientStops = new ObservableCollection<GaugeGradientStop>()
{
new GaugeGradientStop(){Color= Color.Yellow, Value = 0},
new GaugeGradientStop(){Color= Color.Red, Value = 50},
new GaugeGradientStop(){Color= Color.Blue, Value = 100},
};
scale.Ranges.Add(range);
Output
