This is a migrated thread and some comments may be shown as answers.

Bar Indicator Throws Exception when RangeColorMode is set to ProportionalBrush

3 Answers 53 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Gopi
Top achievements
Rank 1
Gopi asked on 23 Apr 2012, 10:02 AM
Hi Support Team,

I want to display the Gauge control with multiple Ranges (0-25, 25-50, 50-75). Each range should be distinguished by different colors (Green, Yellow and Red). I need to show the Range colors in both Outer and Inner Side of the Gauge. For inner color bar i have used "BarIndicator". Everything is working fine when i place the Gauge in User Control.

But when i use the guage inside the Rad TileView. The application is throwing an exception("Argument Exception : Value does not fall with in the expected range") only when we assign RangeColorMode="ProportionalBrush". When i remove this property it is working fine.

I need your help on this. also setting the Theme for the Gauge doesn;t working for me.

Need your help on this.

Telerik Version : 2012.1.0215.1050
Silverlight version : 5.0
IE Version : 8.0

XAML : 

<UserControl x:Class="GaugeDemo.GaugeDemo"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="400">
 
    <UserControl.Resources>
 
        <DataTemplate x:Key="contentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                            State="Normal"
                                            Background="White">
                <telerik:RadFluidContentControl.Content>
                    <telerik:RadSemicircleNorthGauge Background="White" >
                        <telerik:RadialScale Min="0" Max="100"
                                             MajorTickStep="25">
                            <telerik:RadialScale.Ranges>
                                <telerik:GaugeRange x:Name="GreenRange"
                                                    Min="0" Max="25"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Green"
                                                    Background="Green"
                                                    IndicatorBackground="Green"  />
                                <telerik:GaugeRange x:Name="YellowRange"
                                                    Min="25" Max="50"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Yellow"
                                                    Background="Yellow"
                                                    IndicatorBackground="Yellow" />
                                <telerik:GaugeRange x:Name="RedRange"
                                                    Min="50" Max="75"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Red"
                                                    Background="Red"
                                                    IndicatorBackground="Red" />
                            </telerik:RadialScale.Ranges>
                            <telerik:RadialScale.Indicators>
                                <telerik:BarIndicator x:Name="radialBar"
                                                      telerik:ScaleObject.Location="Inside"
                                                      telerik:ScaleObject.Offset="0.25"
                                                      Value="75"
                                                      UseRangeColor="True"
                                                      RangeColorMode="ProportionalBrush">
                                </telerik:BarIndicator>
                                <telerik:Needle Name="needleNorth" IsAnimated="True" Value="50" />
                                <telerik:Pinpoint />
                            </telerik:RadialScale.Indicators>
                        </telerik:RadialScale>
                    </telerik:RadSemicircleNorthGauge>
                </telerik:RadFluidContentControl.Content>
            </telerik:RadFluidContentControl>
        </DataTemplate>
 
    </UserControl.Resources>
 
 
    <Grid x:Name="LayoutRoot" Background="White">
         
       
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <Border Grid.Row="0" Background="#f2f2f2" BorderThickness="1" BorderBrush="#a0a0a0" Margin="0"/>
 
        <telerik:RadTileView  x:Name="radTileView"
                              ContentTemplate="{StaticResource contentTemplate}" 
                              MinimizedItemsPosition="Left"
                              Grid.Row="1">
        </telerik:RadTileView>
 
        <telerik:RadSemicircleNorthGauge Grid.Row="2" Background="White"
                                         telerik:StyleManager.Theme="Office Silver">
            <telerik:RadialScale Min="0" Max="75" MajorTickStep="25">
                <telerik:RadialScale.Ranges>
                    <telerik:GaugeRange x:Name="GreenRange"
                                                    Min="0" Max="25"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Green"
                                                    Background="Green"
                                                    IndicatorBackground="Green"  />
                    <telerik:GaugeRange x:Name="YellowRange"
                                                    Min="25" Max="50"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Yellow"
                                                    Background="Yellow"
                                                    IndicatorBackground="Yellow" />
                    <telerik:GaugeRange x:Name="RedRange"
                                                    Min="50" Max="75"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Red"
                                                    Background="Red"
                                                    IndicatorBackground="Red" />
                </telerik:RadialScale.Ranges>
                <telerik:RadialScale.Indicators>
                    <telerik:BarIndicator x:Name="radialBar"
                                          telerik:ScaleObject.Location="Inside"
                                          telerik:ScaleObject.Offset="0.25"
                                          Value="75"
                                          UseRangeColor="True"
                                          RangeColorMode="ProportionalBrush">
                    </telerik:BarIndicator>
                    <telerik:Needle Name="needleNorth" IsAnimated="True" Value="50" />
                    <telerik:Pinpoint />
                </telerik:RadialScale.Indicators>
            </telerik:RadialScale>
        </telerik:RadSemicircleNorthGauge>
 
    </Grid>
</UserControl>

Code Behind :

namespace GaugeDemo
{
    public partial class GaugeDemo : UserControl
    {
        private ObservableCollection<object> collection = new ObservableCollection<object>();
 
        public GaugeDemo()
        {
            InitializeComponent();
            collection.Add(new { NeedleValue = 50});
            collection.Add(new { NeedleValue = 60});
            collection.Add(new { NeedleValue = 70});
            radTileView.ItemsSource = collection;
        }
    }
}

Thanks in Advance.

Regards,
Gopi V

3 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 26 Apr 2012, 11:15 AM
Hi,

It is very complicated and it is hard to reproduce the problem without your solution, but using just your description. Could you, please, provide us with your solution or with a small sample runnable solution which reproduces it?

All the best,
Andrey Murzov
the Telerik team

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

0
Gopi
Top achievements
Rank 1
answered on 26 Apr 2012, 11:42 AM
Hi Team Admin,

How do i upload my source codes ? the attachment allows only image specific extensions.

Can you please guide me on this ?

Thanks & Regards,
Gopi V
0
Andrey
Telerik team
answered on 01 May 2012, 06:56 AM
Hello Gopi,

You can open a support ticket and attach your solution to it.

Currently we are able to reproduce the problem. We have created a PITS issue to fix it. You can track it using the following link:
http://www.telerik.com/support/pits.aspx#/public/silverlight/10843

As workaround you can use the GaugeRangeGroup element to add ranges for inner color bar. The grouping feature is available for ranges and indicators. For more information you can take a look at the following documentation topic:
http://www.telerik.com/help/silverlight/radgauge-features-groups.html

I have checked the theming of the gauge control. It works as expected. Please, make sure you added the reference to the Telerik.Windows.Themes.Office_Silver DLL in your project.
The sample code is below.

<UserControl x:Class="RangeColorModeTest.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
  
        <DataTemplate x:Key="contentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                            State="Normal"
                                            Background="White">
                <telerik:RadFluidContentControl.Content>
                    <telerik:RadSemicircleNorthGauge Background="White" telerik:StyleManager.Theme="Metro">
                        <telerik:RadialScale Min="0" Max="100"
                                             MajorTickStep="25">
                            <telerik:RadialScale.Ranges>
                                <telerik:GaugeRange x:Name="GreenRange"
                                                    Min="0" Max="25"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Green"
                                                    Background="Green"
                                                    IndicatorBackground="Green"  />
                                <telerik:GaugeRange x:Name="YellowRange"
                                                    Min="25" Max="50"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Yellow"
                                                    Background="Yellow"
                                                    IndicatorBackground="Yellow" />
                                <telerik:GaugeRange x:Name="RedRange"
                                                    Min="50" Max="75"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Red"
                                                    Background="Red"
                                                    IndicatorBackground="Red" />
                                <telerik:GaugeRangeGroup Location="Inside"
                                                         Offset="0.25">
                                    <telerik:GaugeRange Min="0" Max="25"
                                                    StartWidth="0.1"
                                                    EndWidth="0.1"
                                                    TickBackground="Green"
                                                    Background="Green"
                                                    IndicatorBackground="Green"  />
                                    <telerik:GaugeRange Min="25" Max="50"
                                                    StartWidth="0.1"
                                                    EndWidth="0.1"
                                                    TickBackground="Yellow"
                                                    Background="Yellow"
                                                    IndicatorBackground="Yellow" />
                                    <telerik:GaugeRange Min="50" Max="75"
                                                    StartWidth="0.1"
                                                    EndWidth="0.1"
                                                    TickBackground="Red"
                                                    Background="Red"
                                                    IndicatorBackground="Red" />
                                </telerik:GaugeRangeGroup>
                            </telerik:RadialScale.Ranges>
                            <telerik:RadialScale.Indicators>
                                <!--
                                <telerik:BarIndicator telerik:ScaleObject.Location="Inside"
                                                      telerik:ScaleObject.Offset="0.25"
                                                      Value="75"
                                                      UseRangeColor="True"
                                                      RangeColorMode="ProportionalBrush">
                                </telerik:BarIndicator>
                                -->
                                <telerik:Needle Name="needleNorth" IsAnimated="True" Value="50" />
                                <telerik:Pinpoint />
                            </telerik:RadialScale.Indicators>
                        </telerik:RadialScale>
                    </telerik:RadSemicircleNorthGauge>
                </telerik:RadFluidContentControl.Content>
            </telerik:RadFluidContentControl>
        </DataTemplate>
  
    </UserControl.Resources>
  
  
    <Grid x:Name="LayoutRoot" Background="White">
  
  
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
  
        <Border Grid.Row="0" Background="#f2f2f2" BorderThickness="1" BorderBrush="#a0a0a0" Margin="0"/>
  
        <telerik:RadTileView  x:Name="radTileView"
                              ContentTemplate="{StaticResource contentTemplate}"
                              MinimizedItemsPosition="Left"
                              Grid.Row="1">
        </telerik:RadTileView>
  
        <telerik:RadSemicircleNorthGauge Grid.Row="2" Background="White"
                                         telerik:StyleManager.Theme="Office_Silver">
            <telerik:RadialScale Min="0" Max="75" MajorTickStep="25">
                <telerik:RadialScale.Ranges>
                    <telerik:GaugeRange x:Name="GreenRange"
                                                    Min="0" Max="25"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Green"
                                                    Background="Green"
                                                    IndicatorBackground="Green"  />
                    <telerik:GaugeRange x:Name="YellowRange"
                                                    Min="25" Max="50"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Yellow"
                                                    Background="Yellow"
                                                    IndicatorBackground="Yellow" />
                    <telerik:GaugeRange x:Name="RedRange"
                                                    Min="50" Max="75"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Red"
                                                    Background="Red"
                                                    IndicatorBackground="Red" />
                </telerik:RadialScale.Ranges>
                <telerik:RadialScale.Indicators>
                    <telerik:BarIndicator x:Name="radialBar"
                                          telerik:ScaleObject.Location="Inside"
                                          telerik:ScaleObject.Offset="0.25"
                                          Value="75"
                                          UseRangeColor="True"
                                          RangeColorMode="ProportionalBrush">
                    </telerik:BarIndicator>
                    <telerik:Needle Name="needleNorth" IsAnimated="True" Value="50" />
                    <telerik:Pinpoint />
                </telerik:RadialScale.Indicators>
            </telerik:RadialScale>
        </telerik:RadSemicircleNorthGauge>
  
    </Grid>
</UserControl>

Regards,
Andrey Murzov
the Telerik team

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

Tags
Gauge
Asked by
Gopi
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Gopi
Top achievements
Rank 1
Share this question
or