[Solved] LinearBar disappearing when UseRangeColor is true

[Matt]

When using the following code my linear bar disappears, however if I remove UseRangeColor then the bar appears. I've Attached Images of both outputs

<telerik:RadGauge telerik:StyleManager.Theme="Metro">
    <telerik:LinearGauge Width="300" Height="180">
        <telerik:LinearScale Orientation="Horizontal" Left="0.07" Top="0.28" Min="0" Max="100">
            <telerik:LinearScale.Ranges>
                <telerik:LinearRange Min="0" Max="30" Background="Red" Location="Outside"/>
                <telerik:LinearRange Max="80" Min="30" Background="Orange" Location="Outside"/>
                <telerik:LinearRange Max="100" Min="80" Background="Green" Location="Outside"/>
            </telerik:LinearScale.Ranges>

            <telerik:IndicatorList>
                <telerik:LinearBar Name="linearBar"
                                   UseRangeColor="True"
                     RangeColorMode="ProportionalGradient"
                     RangeColorSmoothing="0.5"
                     Value="60" />
            </telerik:IndicatorList>

        </telerik:LinearScale>
    </telerik:LinearGauge>
</telerik:RadGauge>

[Andrey]

Hello Matt,

When indicator (LinearBar in this case) has UseRangeColor property set to "True" it uses value of the LinearRange.IndicatorBackground property. None of ranges shown in your XAML has this property set and this is the reason for the missing bar.

Regards,

Andrey Murzov

the Telerik team

[Grégory]

Could you give us an example, please. I have a radialgauge and I got the same. Can't figure it out how to fill it with  LinearRange.IndicatorBackground. Thank you!
P.S.
I'm using the latest gauge.

[Andrey]

Hello Grégory,

The new gauge control has the internal XAML structure different from the one used by the old control. Here is an example which demonstrates how the gauge ranges can be used to fill the bar indicator:

<telerik:RadRadialGauge>
    <telerik:RadialScale Name="scale">
        <telerik:RadialScale.Ranges>
            <telerik:GaugeRange Min="0" Max="50"
                                StartWidth="0.1"
                                EndWidth="0.12"
                                Background="Green"
                                IndicatorBackground="Green" />
            <telerik:GaugeRange Min="50" Max="80"
                                StartWidth="0.12"
                                EndWidth="0.14"
                                Background="Yellow"
                                IndicatorBackground="Yellow" />
            <telerik:GaugeRange Min="80" Max="100"
                                StartWidth="0.14"
                                EndWidth="0.16"
                                Background="Red"
                                IndicatorBackground="Red" />
        </telerik:RadialScale.Ranges>
        <telerik:RadialScale.Indicators>
            <telerik:BarIndicator Name="bar"
                                  UseRangeColor="True"
                                  Value="30"/>
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</telerik:RadRadialGauge>

 

All the best,

Andrey Murzov

the Telerik team