Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > creating a half circle gauge

• Harry

  Posted on Feb 24, 2011 (permalink)

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

  Reply

• Andrey Andrey

  Posted on Mar 1, 2011 (permalink)

  Hi Harry,
  
  You can use the following sample code to create the semicircle gauge:
  

  <UserControl x:Class="SemicircleGauge.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"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      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!

  Reply

• Swati

  Posted on Jan 3, 2012 (permalink)

  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.

  Reply

• Evgenia Evgenia

  Posted on Jan 6, 2012 (permalink)

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

  Reply

• Swati

  Posted on Jan 10, 2012 (permalink)

  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.

  Reply

• Andrey Andrey

  Posted on Jan 13, 2012 (permalink)

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

  Reply

• Swati

  Posted on Feb 1, 2012 (permalink)

  Hi,
  
  Thanks for your reply.Its working! Thanks a lot!!!
  
  Best Regards,
  Swati

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > creating a half circle gauge