Set Gauge Ranges Programatically

[jfkrueger]

I am very new to Silverlight so please forgive me if this is an incredibly basic question. I have a gauge with 4 ranges. I do not know some of the min/max values at design time so I enter values as placeholders. When the control fires up, I am updating the values based on data passed in from a WCF service. Everything sets correctly and no errors are thrown, but the gaugue is never updated with the new ranges. Here is my xaml:

<telerik:RadGauge Name="RadGaugeOverallQuality"
                          VerticalAlignment="Top"
                          Margin="25,25,25,25"
                          Height="150"
                          Width="150">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <telerik:RadialGauge>
                    <telerik:RadialScale x:Name="radialScale" Min=".5" Max="1.5" MajorTickStep=".1">

                        <telerik:RangeList>
                            <telerik:RangeBase Name="RangeOverallQualitySignificantlyBad" Min=".5" Max=".75" IndicatorBackground="DarkRed" />
                            <telerik:RangeBase Name="RangeOverallQualityStandardBad" IndicatorBackground="Red" Min=".75" Max="1" />
                            <telerik:RangeBase Name="RangeOverallQualityStandardGood" IndicatorBackground="Green" Min="1" Max="1.25" />
                            <telerik:RangeBase Name="RangeOverallQualitySignificantlyBetter" IndicatorBackground="LimeGreen" Min="1.25" Max="1.5" />
                        </telerik:RangeList>
                        <telerik:IndicatorList>
                            <telerik:RadialBar Name="bar"
                               UseRangeColor="True"
                               RangeColorMode="ProportionalBrush"
                               Value="20" />
                            <telerik:Needle x:Name="gauge1_needle" IsAnimated="true" Value="0"   />
                        </telerik:IndicatorList>

                        <telerik:RadialScale.MajorTick>
                            <telerik:MajorTickProperties />
                        </telerik:RadialScale.MajorTick>
                        <telerik:RadialScale.Label>
                            <telerik:LabelProperties FontSize="10" Format="{}{0:F2}"  />
                        </telerik:RadialScale.Label>

                    </telerik:RadialScale>

                </telerik:RadialGauge>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.60*" />
                        <RowDefinition Height="0.40*" />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Center"
                            Foreground="GhostWhite" FontFamily="CourierNew">
                    </TextBlock>
                </Grid>
            </Grid>
        </telerik:RadGauge>

Here is the code:

RangeOverallQualitySignificantlyBad.Min = .5
        RangeOverallQualitySignificantlyBad.Max = lResult("OverallQualityIndexConfidenceIntervalMin")

        RangeOverallQualityStandardBad.Min = lResult("OverallQualityIndexConfidenceIntervalMin")
        RangeOverallQualityStandardBad.Max = 1

        RangeOverallQualityStandardGood.Min = 1
        RangeOverallQualityStandardGood.Max = lResult("OverallQualityIndexConfidenceIntervalMax")

        RangeOverallQualitySignificantlyBetter.Min = lResult("OverallQualityIndexConfidenceIntervalMax")
        RangeOverallQualitySignificantlyBetter.Max = 1.5

        RadGaugeOverallQuality.UpdateLayout

Can someone please enlighten me as to why this code has no effect and show me the proper way to update ranges in code?

Thanks!

[jfkrueger]

Not sure if this is the right way to do it or not but here is what I have figured out:

1) Completely removed the definitions for the ranges from the markup
2) Programatically added the ranges:

'Set ranges for Overall Quality Index Guage
radialScale.Ranges.Add(New RadialRange With {.Min = .8, .Max = lResult("OverallQualityIndexConfidenceIntervalMin"), .Background=New SolidColorBrush(Colors.Magenta), .StartWidth=.05, .EndWidth=.15})
radialScale.Ranges.Add(New RadialRange With {.Min = lResult("OverallQualityIndexConfidenceIntervalMin"), .Max = 1, .Background=New SolidColorBrush(Colors.Red), .StartWidth=.15, .EndWidth=.2})
radialScale.Ranges.Add(New RadialRange With {.Min = 1, .Max = lResult("OverallQualityIndexConfidenceIntervalMax"), .Background=New SolidColorBrush(Colors.Green), .StartWidth=.2, .EndWidth=.15})
radialScale.Ranges.Add(New RadialRange With {.Min = lResult("OverallQualityIndexConfidenceIntervalMax"), .Max = 1.20, .Background=New SolidColorBrush(Colors.Orange), .StartWidth=.15, .EndWidth=.05})

I would much rather define the ranges in the markup and just update the min and max values in code like I was trying to do originally so if someone knows how to make that work that would be awesome. This works but one thing that is strange is that I don't have the full range of colors to select from. From the markup I can select "DarkRed", "LightGreen", etc but in code I only have a very limited selection of colors to choose from. It telle me that "DarkRed" is not a member of System.Windows.Media.Colors.

I'm getting to where I want to be, but I feel like i'm kind of just hacking my way through it without knowing the best way to do what I'm trying to accomplish.

Any help would be greatly appreciated.

Thanks!

[Andrey]

Hi jfkrueger,

I checked your XAML and your VB snippets and I found that in XAML RangeList contains RangeBase elements (which is OK, but they are invisible and serve special cases), but in your VB code you add RadialRange to the RangeList. RadialRange is visible element. If you change your XAML to use RadialRange instead of RangeBase it will work fine.

Regards,
Andrey Murzov
the Telerik team

[jfkrueger]

That works great, thank you!