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

Circular Gauge Scale not rendered correctly

3 Answers 106 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Kirubhananth
Top achievements
Rank 1
Kirubhananth asked on 24 Aug 2012, 12:30 PM
    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"
    mc:Ignorable="d"
    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?

3 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 29 Aug 2012, 05:30 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Guru
Top achievements
Rank 1
answered on 29 Aug 2012, 09:06 PM
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
0
Andrey
Telerik team
answered on 03 Sep 2012, 10:19 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

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