creating a half circle gauge

7 posts, 0 answers
  1. Harry
    Harry avatar
    11 posts
    Member since:
    Feb 2011

    Posted 24 Feb 2011 Link to this post

    hi guys
    I have been looking for a good complete example of a half circle gauge and I found something with a Style="{StaticResource RadialScaleHalfCircleNStyle}" but I do not know where this refers to

    Can any one help???
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 01 Mar 2011 Link to this post

    Hi Harry,

    You can use the following sample code to create the semicircle gauge:
    <UserControl x:Class="SemicircleGauge.MainPage"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400"
        <UserControl.Resources
            <ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" /> 
        </UserControl.Resources
        <Grid x:Name="LayoutRoot" Background="White"
            <telerik:RadGauge x:Name="radGauge" Width="300" Height="174"
                <telerik:RadialGauge x:Name="radialGauge" Style="{StaticResource RadialGaugeHalfCircleNStyle}"
                    <telerik:RadialScale x:Name="radialScale" Style="{StaticResource RadialScaleHalfCircleNStyle}"
                        <telerik:IndicatorList
                            <telerik:Needle x:Name="needle"
                                            IsAnimated="True"
                                            Value="50"/> 
                        </telerik:IndicatorList
                    </telerik:RadialScale
                </telerik:RadialGauge
            </telerik:RadGauge
        </Grid
    </UserControl>

    This sample uses built-in theme resource dictionary of gauge control (Office Black theme). For using another theme you should specify the dictionary source from it. Also the DLL of this theme should be added to references of your project.
    For example the resource dictionary should be specified as the following for the Summer theme:
    <UserControl.Resources
        <ResourceDictionary Source="/Telerik.Windows.Themes.Summer;component/Themes/Telerik.Windows.Controls.Gauge.xaml" /> 
    </UserControl.Resources>

    Corresponding styles for RadialGauge and RadialScale elements specify its orientation according to the following pattern:
    RadialGaugeHalfCircle{N|S|W|E}Style
    RadialScaleHalfCircle{N|S|W|E}Style

    For example:
    RadialGaugeHalfCircleNStyle
    RadialScaleHalfCircleNStyle
    N sets gauge orientation to the North.

    For more information please take a look to the Semicircle gauge topic of our online documentation:
    http://www.telerik.com/help/silverlight/radial-scale-semicircle-gauge.html

    All the best,
    Andrey Murzov
    the Telerik team

    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Swati
    Swati avatar
    17 posts
    Member since:
    Jan 2012

    Posted 03 Jan 2012 Link to this post

    Hi,

    I am trying to create Half Circle gauge control in Code behind(In C#.Net) But not able to create it... Referred lots of links but still my problem is unresolved. Please guide me to create half circle in code behind. In the below code I also have written code for putting needle in the Gauge.. But it is also not getting displayed when I run the code.

    I m also posting my code here..: 

      
        
    public Telerik.Windows.Controls.Gauges.LinearGauge CreateLineargauge(Telerik.Windows.Controls.Gauges.LinearGauge lineargauge)
           {
               lineargauge.Background = Brushes.Gray;
               lineargauge.Width = 150;
               lineargauge.Height = 250;
               lineargauge.Foreground = Brushes.Red;
               LinearScale ls = new LinearScale();
               ls.Name = "Scale1";
               ls.Min = 0;
               ls.Max = 40;
               ls.EndWidth = 0.1;
               ls.StartWidth = 0.1;
               ls.MiddleTicks = 3;
               ls.MinorTicks = 5;
               ls.Background = Brushes.DimGray;
               lineargauge.Items.Add(ls);
               return lineargauge;
           }
     
           public Telerik.Windows.Controls.Gauges.RadialGauge CreateRadialGauge(Telerik.Windows.Controls.Gauges.RadialGauge RGauge)
           {
               RGauge.Height = 100;
               RGauge.Width = 100;
               RGauge.Foreground = Brushes.Black;
               RadialScale rs = new RadialScale();
               rs.Name = "sc1";
               rs.Min = 0;
               rs.HorizontalAlignment = HorizontalAlignment.Center;
               rs.StartAngle = 0;
               rs.SweepAngle = 180;
               rs.Max = 100;
               rs.Radius = 1.2d;
               rs.StartWidth = 0.1;
               rs.EndWidth = 0.1;
               rs.MiddleTicks = 5;
               rs.MinorTicks = 5;
               rs.Height = 100;
               rs.Width = 100;
               Needle needle = new Needle();
               needle.Name = "needleN";
               needle.Value = 6;
               needle.Width = 10;
               needle.Height = 500;
               needle.Foreground = Brushes.Red;
               needle.Background = Brushes.Red;
               needle.IsAnimated = true;
               needle.Location = ScaleObjectLocation.Inside;
               needle.Duration = new Duration(TimeSpan.FromSeconds(2));
               RGauge.Items.Add(rs);
               rs.Indicators.Add(needle);
               rs.Radius = 0.2d;
               var uri = new Uri("/Telerik.Windows.Controls.Gauge;component/Themes/generic.xaml", UriKind.Relative);
               var dictionalry = new ResourceDictionary();
               dictionalry.Source = uri;
               if (dictionalry.Contains("RadialGaugeHalfCircleNStyle"))
               {
                   RGauge.Style = dictionalry["RadialGaugeHalfCircleNStyle"] as Style;
               }
               if (dictionalry.Contains("RadialScaleHalfCircleNStyle"))
               {
                   rs.Style = dictionalry["RadialScaleHalfCircleNStyle"] as Style;
               }
               //RGauge.Margin = new Thickness(e.GetPosition(this.Gr).X, e.GetPosition(this.Gr).Y, 0, 0);
               this.Gr.Children.Add(RGauge);
               return null;
           }

    Best regards,
    Swati.
  5. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 06 Jan 2012 Link to this post

    Hello,

    With the 2011.Q3 release we introduced a new gauge control. It is almost new control redesigned from scratch. Some of its features are similar to the old control’s features but they are implemented in absolutely different way (using different set of properties), some features are completely new. You may see our new Semi-circle presented gauge in the demo.
    Please note that in order to use the RadGauge control and its components you have to reference the following assemblies:
    • Telerik.Windows.Controls.DataVisualization.dll
    • Telerik.Windows.Controls.dll
    Here is a sample which demonstrates how you can create a semi-circle Gauge in code-behind:

    RadSemicircleNorthGauge gauge = new RadSemicircleNorthGauge() { Width = 300, Height = 200};
              RadialScale scale = new RadialScale();
              Needle needle = new Needle(){ IsAnimated = true };
              Pinpoint pinpoint = new Pinpoint();
              needle.Value = 50;
              scale.Indicators.Add(needle);
              scale.Indicators.Add(pinpoint);
              gauge.Items.Add(scale);
              this.LayoutRoot.Children.Add(gauge);

    P.S. We still support the old Gauge, however have in mind that it has been exluded from the
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    namespace to avoid any possible ambiguity.

    Greetings,
    Evgenia
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  6. Swati
    Swati avatar
    17 posts
    Member since:
    Jan 2012

    Posted 10 Jan 2012 Link to this post

    Hi,

    Thanks for reply. I am still not able to create a half circle gauge.. I am currently using  2011.2.920.35 this version. I suppose this version does not support RadSemicircleNorthGauge..

    How can we create half circle in 2011.2.920 version? I need to create half circle in this version only... How to do that??

    Regards,
    Swati.
  7. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 13 Jan 2012 Link to this post

    Hello,

    The 2011.2.920.35 is a WPF version. For WPF version you should use a prefix for style names. The prefix should be the same as the theme name. By default the gauge theme is Office_Black. So, the names of the styles should be Office_BlackRadialGaugeHalfCircleNStyle and Office_BlackRadialScaleHalfCircleNStyle.
    The sample code is below.
    using System;
    using System.Windows;
    using Telerik.Windows.Controls.Gauges;
     
    namespace SemiCircleGaugeFromCodeBehind
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
     
                RadialGauge gauge = this.CreateRadialGauge(50);
                this.LayoutRoot.Children.Add(gauge);
            }
     
            private RadialGauge CreateRadialGauge(double value)
            {
                Uri uri = new Uri("/Telerik.Windows.Controls.Gauge;component/Themes/generic.xaml", UriKind.Relative);
                ResourceDictionary dictionalry = new ResourceDictionary()
                {
                    Source = uri
                };
     
                RadialGauge gauge = new RadialGauge()
                {
                    Width = 170,
                    Height = 100,
                    Style = dictionalry["Office_BlackRadialGaugeHalfCircleNStyle"] as Style
                };
     
                RadialScale scale = new RadialScale()
                {
                    Radius = 1.1,
                    Style = dictionalry["Office_BlackRadialScaleHalfCircleNStyle"] as Style
                };
     
                gauge.Items.Add(scale);
     
                Needle needle = new Needle()
                {
                    IsAnimated = true,
                    Value = value
                };
     
                scale.Indicators.Add(needle);
     
                return gauge;
            }
        }
    }

    All the best,
    Andrey Murzov
    the Telerik team

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

  8. Swati
    Swati avatar
    17 posts
    Member since:
    Jan 2012

    Posted 01 Feb 2012 Link to this post

    Hi,

    Thanks for your reply.Its working! Thanks a lot!!!

    Best Regards,
    Swati
Back to Top
DevCraft banner