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 110 Views

Gauge

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

This question is locked. New answers and comments are not allowed.

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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="*"/>

</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

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"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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: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="*"/>

</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 >>