Bar Indicator Throws Exception when gauge is placed inside the Rad TileView

[Gopi]

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

[Andrey]

Hi Gopi,

Thank you for a sample code.
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="*"/>
            <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>

Kind regards,
Andrey Murzov
the Telerik team