As an example, if we define the Axis (GaugeLinearAxis) Min and Max from -20 to 100, and the GaugeBarIndictor value is set to 35, the Fill starts at 0 and ends at 35, rather than starting at -20 and ending at 35.
Similarly, if the GaugeBarIndictor value is set to -10, the fill starts at 0, and ends at -10, rather than -20 to -10.
This behavior occurs on both windows and android.
Xaml
<telerik:RadRadialGauge x:Name="gauge"
AutomationId="gauge">
<telerik:RadRadialGauge.Axis>
<telerik:GaugeLinearAxis x:Name="axis" />
</telerik:RadRadialGauge.Axis>
<telerik:RadRadialGauge.Indicators>
<telerik:GaugeBarIndicator x:Name="barIndicator" />
<telerik:GaugeNeedleIndicator x:Name="needle" />
</telerik:RadRadialGauge.Indicators>
<telerik:RadRadialGauge.Ranges>
<telerik:GaugeRangesDefinition x:Name="rangeDefinition">
<telerik:GaugeGradientRange x:Name="mainRange">
<telerik:RadGradientStop x:Name="mainRangeStart" />
<telerik:RadGradientStop x:Name="mainRangeEnd" />
</telerik:GaugeGradientRange>
</telerik:GaugeRangesDefinition>
</telerik:RadRadialGauge.Ranges>
</telerik:RadRadialGauge>Code Behind:
axis.Minimum = MinValue;
axis.Maximum = MaxValue;
private void SetValue(float? value)
{
if (value == null)
{
barIndicator.Value = MinValue;
}
else
{
barIndicator.Value = value.Value;
}
}
1 Answer, 1 is accepted
Hello Steve,
Thank you for the image and the code snippets.
The behavior is expected. It is by design and control's implementation. The bar indicator starts drawing from 0, if the value is -10, it will be drawn from 0 to -10.
If you have min value -100 and max value 200 and value 30 and wants the bar to be drawn from -100 to 30 use RangeBarIndicator. For example:
<telerik:RadRadialGauge x:Name="gauge">
<telerik:RadRadialGauge.Axis>
<telerik:GaugeLinearAxis Maximum="200"
Minimum="-100"
Step="25" />
</telerik:RadRadialGauge.Axis>
<telerik:RadRadialGauge.Indicators>
<telerik:GaugeRangeBarIndicator From="-100" To="30"/>
<telerik:GaugeNeedleIndicator Offset="30" Value="60" />
</telerik:RadRadialGauge.Indicators>
<telerik:RadRadialGauge.Ranges>
<telerik:GaugeRangesDefinition>
<telerik:GaugeRange Color="Green"
From="0"
To="150" />
<telerik:GaugeGradientRange From="-20" To="200">
<telerik:RadGradientStop Offset="150" Color="Yellow" />
<telerik:RadGradientStop Offset="200" Color="Red" />
</telerik:GaugeGradientRange>
</telerik:GaugeRangesDefinition>
</telerik:RadRadialGauge.Ranges>
</telerik:RadRadialGauge>Regards,
Maria
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.