Circular Gauge Scale not rendered correctly

4 posts, 0 answers
  1. Kirubhananth
    Kirubhananth avatar
    4 posts
    Member since:
    Jun 2012

    Posted 24 Aug 2012 Link to this post

        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?

  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 29 Aug 2012 Link to this post

    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.

  3. DevCraft banner
  4. Guru
    Guru avatar
    1 posts
    Member since:
    Aug 2012

    Posted 29 Aug 2012 Link to this post

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

    Posted 03 Sep 2012 Link to this post

    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.

Back to Top