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

2 posts, 0 answers
  1. Gopi
    Gopi avatar
    8 posts
    Member since:
    Apr 2012

    Posted 24 Apr 2012 Link to this post

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

    Posted 27 Apr 2012 Link to this post

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

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

  3. DevCraft banner
Back to Top