LinearBar disappearing when UseRangeColor is true

4 posts, 0 answers
  1. Matt
    Matt avatar
    7 posts
    Member since:
    Jul 2011

    Posted 02 Dec 2011 Link to this post

    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>
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 07 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Grégory
    Grégory avatar
    21 posts
    Member since:
    Mar 2011

    Posted 04 May 2012 Link to this post

    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.
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 09 May 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top