[Solved] Circular Gauge Scale not rendered correctly

[Kirubhananth]

    Hi,
         I developed a silverlight application with guages in it. I gave the maximum value, minimum value and created 4 gauge ranges for it. After rendering the page i found that there are lot of confusions in drawing the gauge ranges and showing the actual value.
The Version i am using is "2011.3.1116.1040"

The XAML is as follows

<UserControl x:Class="SampleGauge.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"
    mc:Ignorable="d"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls" FontFamily="Calibri"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadRadialGauge x:Name="circularGauge" >
            <telerik:RadialScale x:Name="circularScale"
                                     MajorTicks="4"
                                     MiddleTicks="2"
                                     MinorTicks="2"
                                     RangeLocation="Inside">
                <telerik:RadialScale.Ranges>
                </telerik:RadialScale.Ranges>
                <telerik:RadialScale.Indicators>
                    <telerik:Marker Name="markerCircular"
                        IsAnimated="True"
                        Duration="0:0:4"
                        UseRangeColor="True">
                    </telerik:Marker>
                    <telerik:Needle x:Name="needleCircular" IsAnimated="True" />
                    <telerik:Pinpoint />
                </telerik:RadialScale.Indicators>
            </telerik:RadialScale>
        </telerik:RadRadialGauge>
    </Grid>
</UserControl>

And the code-behind in C# as follows

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Gauge;

namespace SampleGauge
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            circularScale.Min = -1;
            circularScale.Max = 4;
            SetupRange(0, 1, Colors.DarkGray, Colors.Black, Colors.White);
            SetupRange(1, 2, Colors.Green, Colors.Black, Colors.White);
            SetupRange(2, 3, Colors.Brown, Colors.Black, Colors.White);
            SetupRange(3, 4, Colors.Red, Colors.Black, Colors.White);
        }

        private void SetupRange(double newMin, double newMax, Color RangeColor, Color GaugeColor, Color TextColor)
        {
            GaugeRange range = new GaugeRange()
            {
                Min = newMin,
                Max = newMax,
                StartWidth = 0.03,
                EndWidth = 0.03,
                Background = new SolidColorBrush(RangeColor),
                TickBackground = new SolidColorBrush(RangeColor),
                LabelForeground = new SolidColorBrush(RangeColor),
                IndicatorBackground = new SolidColorBrush(RangeColor)

            };


            circularScale.Ranges.Add(range);
            circularGauge.InnerBackground = new SolidColorBrush(GaugeColor);

            needleCircular.Background = new SolidColorBrush(TextColor);
            markerCircular.Background = new SolidColorBrush(TextColor);
            needleCircular.Background = new SolidColorBrush(TextColor);
            circularScale.Foreground = new SolidColorBrush(TextColor);
            circularScale.MajorTickBackground = new SolidColorBrush(TextColor);
            circularScale.MiddleTickBackground = new SolidColorBrush(TextColor);
            circularScale.MinorTickBackground = new SolidColorBrush(TextColor);
            circularGauge.FontSize = 15;
            markerCircular.Value = 1;
            needleCircular.Value = 1;
        }
    }
}

The output for the above code is not clear. The drawn gauge is not correct and the actual value is also not correct.

Can anyone please try this code, see the output and help me render the correct gauge?

[Andrey]

Hi Kirubhananth,

Could you, please, clarify what do you mean when you say that drawn gauge is not correct and the actual value is also not correct? I prepared a test project based on your XAML and code which uses 2011.3.1116.1040 version of the RadControls. Everything looks correspondingly to your settings. See attached screenshot for result.
If you set LabelFormat for radial scale so it shows fractional digits for labels you will see that all things are OK. See attached screenshot #2.
When you want to use integer labels only then you can specify appropriate value for the MajorTicks or for the MajorTickStep property like this:

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    circularScale.Min = -1;
    circularScale.Max = 4;
    circularScale.MajorTickStep = 1;
    SetupRange(0, 1, Colors.DarkGray, Colors.Black, Colors.White);
    SetupRange(1, 2, Colors.Green, Colors.Black, Colors.White);
    SetupRange(2, 3, Colors.Brown, Colors.Black, Colors.White);
    SetupRange(3, 4, Colors.Red, Colors.Black, Colors.White);
}

For more information about tick marks please take a look at the following documentation topic:
http://www.telerik.com/help/silverlight/radial-scale-tick-marks.html

Regards,
Andrey Murzov
the Telerik team

[Guru]

Hi Andrey,

Even in your screenshot, the ranges are not rendered correctly. Based on the code SetupRange(1, 2, Colors.Green, Colors.Black, Colors.White); the green color should start from 1 and end at 2 but if you look at the screenshot that is not the case. please let me know if there is a way to fix this.

Thanks
Guru

[Andrey]

Hi Guru,

Please, read my previous message carefully and take a look into the screenshot1.png. You can see that with your settings the major ticks and labels aren't in the whole number positions. So, all things are rendered fine according to settings.

When you create an application using my fix with MajorTickStep, then setting the gauge will look as in the screenshot I have attached to this message.

Greetings,
Andrey Murzov
the Telerik team