Article Rating

  • *****
  • 2 Rating(s)
  • 2
  • 0
  • 0
  • 0
  • 0

Add a Gauge control in Visual Studio project

Applies to: Nevron Chart for .NET (Gauge for .NET)

How to add a Gauge control in Visual Studio project?

There is no separate VS Toolbox item for the Nevron Gauge, the Gauge is part of Nevron Chart control. The following getting started guide will help you create a simple Windows Forms Gauge by customizing Nevron Chart control for .NET.



Create a new WinForm application:

  1. Open Microsoft Visual Studio for .NET
  2. Select the File - New - Project command - the new project dialog will be displayed
  3. Select Visual C# Projects - Windows Applications
    Note: VS 2010 users must switch the target framework to ".NET Framework 4" as by default Windows Forms applications target ".NET Framework 4 Client Profile". This is required, because Nevron Chart for WinForms uses design time support features that are not present in ".NET Framework 4 Client Profile". To do this right click on the project in Solution Explorer and select properties. On the Application tab go to "Target Framework" and select ".NET Framework 4".
  4. Click the OK button - the designer for Form1 should automatically appear

Insert Nevron Chart control:

  1. The Nevron .NET Vision installation must register the NChartControl control in the Nevron Chart WinForm toolbox group. In case this group is created go to step 6.
  2. Right click on the Toolbox background. Select the "Choose Items…" command.
  3. In the "Customize Toolbox Items" dialog select the ".NET Framework Components" tab.
  4. Click on the "Browse..." button and select the Nevron.Chart.WinForm.dll assembly located in the Nevron .NET Vision installation directory.
  5. The NChartControl should appear at the end of the toolbox Windows Forms list.
  6. Drag and drop the NChartControl to the form and resize it as you see fit (or set its Dock property to Fill).
  7. Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Chart.dll; Nevron.Chart.WinForm.dll; Nevron.Presentation.dll; and Nevron.System.dll;
  8. Double click on Form1 to generate the Form1_Load method.
  9. Use the following code example to programmatically create the gauge:

* The example code can be simplified, this example is meant to shows different gauge properties and style configurations

[C#]
using System;
using System.Drawing;
using System.Windows.Forms;
using Nevron.Chart;
using Nevron.GraphicsCore;
...
private void Form1_Load(object sender, EventArgs e)
{
    nChartControl1.Panels.Clear();
  
    NRadialGaugePanel radialGauge = new NRadialGaugePanel();
    nChartControl1.Panels.Add(radialGauge);
    radialGauge.Dock = DockStyle.Fill;
  
    radialGauge.BeginAngle = 110;
    radialGauge.SweepAngle = 320;
    radialGauge.InnerRadius = new NLength(0);
    radialGauge.AutoBorder = RadialGaugeAutoBorder.Circle;
      
    // Gauge cap style
    radialGauge.CapStyle.Size = new NSizeL(20, 20);
    radialGauge.CapStyle.Shape.FillStyle = new NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 51, 51, 51), Color.FromArgb(255, 255, 255, 255));
    radialGauge.CapStyle.Shape.StrokeStyle.Width = new NLength(1);
    radialGauge.CapStyle.Shape.StrokeStyle.Color = Color.FromArgb(255, 41, 41, 41);
    radialGauge.CapStyle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur;
    radialGauge.CapStyle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
    radialGauge.CapStyle.Shape.ShadowStyle.Offset = new NPointL(2, 2);
    radialGauge.CapStyle.Shape.ShadowStyle.FadeLength = new NLength(4);
    radialGauge.CapStyle.Shape.ShadowStyle.Scale = 1;
      
    // apply background effect to the gauge
    NEdgeBorderStyle borderStyle = new NEdgeBorderStyle(BorderShape.Auto);
    borderStyle.OuterBevelWidth = new NLength(6);
    borderStyle.OuterBevelFillStyle = new NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221));
    borderStyle.InnerBevelWidth = new NLength(3);
    borderStyle.InnerBevelFillStyle = new NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221));
    borderStyle.MiddleBevelWidth = new NLength(0);
    radialGauge.BorderStyle = borderStyle;
  
    radialGauge.BackgroundFillStyle = new NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 221, 221, 221), Color.FromArgb(255, 41, 41, 41));
  
    // apply glass effect to the gauge
    NGlassEffectStyle glass = new NGlassEffectStyle();
    glass.CornerRounding = new NLength(10);
    glass.DarkColor = Color.FromArgb(200, Color.LightGray);
    glass.LightColor = Color.FromArgb(200, Color.White);
    glass.EdgeDepth = new NLength(6);
    glass.EdgeOffset = new NLength(1);
    glass.LightDirection = -39;
    glass.LightSpread = 66;
    radialGauge.PaintEffect = glass;
      
    // add needle indicators
    NNeedleValueIndicator needle = new NNeedleValueIndicator();
    needle.Value = 74;
    needle.OffsetFromScale = new NLength(-18);
    needle.Width = new NLength(8);
    needle.Shape.FillStyle = new NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 153, 0, 0));
    needle.Shape.StrokeStyle.Color = Color.FromArgb(255, 165, 0, 33);
    needle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur;
    needle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
    needle.Shape.ShadowStyle.Offset = new NPointL(2, 2);
    needle.Shape.ShadowStyle.FadeLength = new NLength(4);
    needle.Shape.ShadowStyle.Scale = 1;
    radialGauge.Indicators.Add(needle);
  
    // add range indicator
    NRangeIndicator rangeIndicator = new NRangeIndicator();
    rangeIndicator.PaintOrder = IndicatorPaintOrder.BeforeScale;
    rangeIndicator.OffsetFromScale = new NLength(-20);
    rangeIndicator.OriginMode = OriginMode.ScaleMax;
    rangeIndicator.Value = 50;
    rangeIndicator.BeginWidth = new NLength(1);
    rangeIndicator.EndWidth = new NLength(10);
    rangeIndicator.StrokeStyle.Width = new NLength(0);
    rangeIndicator.FillStyle = new NGradientFillStyle(GradientStyle.StartToEnd, GradientVariant.Variant2, Color.FromArgb(255, 204, 0, 0), Color.FromArgb(1, 255, 255, 255));
    radialGauge.Indicators.Add(rangeIndicator);
      
    // configure axis
    NGaugeAxis axis = (NGaugeAxis)radialGauge.Axes[0];
    axis.Range = new NRange1DD(0, 100);
  
    // modify the anchor so that labels appear after the scale
    axis.Anchor = new NDockGaugeAxisAnchor(GaugeAxisDockZone.Top, true, RulerOrientation.Left, 3, 97);
  
    // configure and apply settings to the gauge scale
    NStandardScaleConfigurator scale = (NStandardScaleConfigurator)axis.ScaleConfigurator;
    //scale.SetPredefinedScaleStyle(PredefinedScaleStyle.PresentationNoStroke);
    scale.RulerStyle.Shape = ScaleLevelShape.Bar;
    scale.RulerStyle.Height = new NLength(3);
    scale.RulerStyle.Offset = new NLength(0);
    scale.RulerStyle.BorderStyle.Width = new NLength(0);
    scale.RulerStyle.FillStyle = new NColorFillStyle(Color.White);
  
    scale.LabelStyle.TextStyle.FontStyle = new NFontStyle("Verdana", 8, FontStyle.Bold);
    scale.LabelStyle.TextStyle.ShadowStyle.Type = ShadowType.GaussianBlur;
    scale.LabelStyle.TextStyle.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
    scale.LabelStyle.TextStyle.ShadowStyle.Offset = new NPointL(1, 1);
    scale.LabelStyle.TextStyle.ShadowStyle.FadeLength = new NLength(1);
    scale.LabelStyle.TextStyle.ShadowStyle.Scale = 1;
    scale.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.White);
    scale.LabelStyle.Angle = new NScaleLabelAngle(ScaleLabelAngleMode.View, 0, true);
    scale.LabelStyle.Offset = new NLength(0);
  
    // configure the scale ticks
    scale.OuterMajorTickStyle.Visible = false;
    scale.OuterMinorTickStyle.Visible = false;
    scale.MajorTickMode = MajorTickMode.AutoMinDistance;
    scale.MinTickDistance = new NLength(25);
    scale.MinorTickCount = 3;
      
    scale.InnerMajorTickStyle.Shape = ScaleTickShape.Triangle;
    scale.InnerMajorTickStyle.Length = new NLength(10);
    scale.InnerMajorTickStyle.Width = new NLength(3);
    scale.InnerMajorTickStyle.LineStyle.Width = new NLength(0);
    scale.InnerMajorTickStyle.FillStyle = new NColorFillStyle(Color.White);
    scale.InnerMajorTickStyle.Offset = new NLength(0);
  
    scale.InnerMinorTickStyle.Shape = ScaleTickShape.Ellipse;
    scale.InnerMinorTickStyle.Length = new NLength(2);
    scale.InnerMinorTickStyle.Width = new NLength(2);
    scale.InnerMinorTickStyle.LineStyle.Width = new NLength(0);
    scale.InnerMinorTickStyle.FillStyle = new NColorFillStyle(Color.White);
    scale.InnerMinorTickStyle.Offset = new NLength(-1);
}

[VB.NET]
Imports System
Imports System.Drawing
Imports System.Windows.Forms
Imports Nevron.Chart
Imports Nevron.GraphicsCore
...
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    NChartControl1.Panels.Clear()
  
    Dim radialGauge As New NRadialGaugePanel()
    NChartControl1.Panels.Add(radialGauge)
    radialGauge.Dock = DockStyle.Fill
  
    radialGauge.BeginAngle = 110
    radialGauge.SweepAngle = 320
    radialGauge.InnerRadius = New NLength(0)
    radialGauge.AutoBorder = RadialGaugeAutoBorder.Circle
  
    ' Gauge cap style
    radialGauge.CapStyle.Size = New NSizeL(20, 20)
    radialGauge.CapStyle.Shape.FillStyle = New NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 51, 51, 51), Color.FromArgb(255, 255, 255, 255))
    radialGauge.CapStyle.Shape.StrokeStyle.Width = New NLength(1)
    radialGauge.CapStyle.Shape.StrokeStyle.Color = Color.FromArgb(255, 41, 41, 41)
    radialGauge.CapStyle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur
    radialGauge.CapStyle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
    radialGauge.CapStyle.Shape.ShadowStyle.Offset = New NPointL(2, 2)
    radialGauge.CapStyle.Shape.ShadowStyle.FadeLength = New NLength(4)
    radialGauge.CapStyle.Shape.ShadowStyle.Scale = 1
  
    ' apply background effect to the gauge
    Dim borderStyle As New NEdgeBorderStyle(BorderShape.Auto)
    borderStyle.OuterBevelWidth = New NLength(6)
    borderStyle.OuterBevelFillStyle = New NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221))
    borderStyle.InnerBevelWidth = New NLength(3)
    borderStyle.InnerBevelFillStyle = New NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221))
    borderStyle.MiddleBevelWidth = New NLength(0)
    radialGauge.BorderStyle = borderStyle
  
    radialGauge.BackgroundFillStyle = New NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 221, 221, 221), Color.FromArgb(255, 41, 41, 41))
  
    ' apply glass effect to the gauge
    Dim glass As New NGlassEffectStyle()
    glass.CornerRounding = New NLength(10)
    glass.DarkColor = Color.FromArgb(200, Color.LightGray)
    glass.LightColor = Color.FromArgb(200, Color.White)
    glass.EdgeDepth = New NLength(6)
    glass.EdgeOffset = New NLength(1)
    glass.LightDirection = -39
    glass.LightSpread = 66
    radialGauge.PaintEffect = glass
  
    ' add needle indicators
    Dim needle As New NNeedleValueIndicator()
    needle.Value = 74
    needle.OffsetFromScale = New NLength(-18)
    needle.Width = New NLength(8)
    needle.Shape.FillStyle = New NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 153, 0, 0))
    needle.Shape.StrokeStyle.Color = Color.FromArgb(255, 165, 0, 33)
    needle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur
    needle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
    needle.Shape.ShadowStyle.Offset = New NPointL(2, 2)
    needle.Shape.ShadowStyle.FadeLength = New NLength(4)
    needle.Shape.ShadowStyle.Scale = 1
    radialGauge.Indicators.Add(needle)
  
    ' add range indicator
    Dim rangeIndicator As New NRangeIndicator()
    rangeIndicator.PaintOrder = IndicatorPaintOrder.BeforeScale
    rangeIndicator.OffsetFromScale = New NLength(-20)
    rangeIndicator.OriginMode = OriginMode.ScaleMax
    rangeIndicator.Value = 50
    rangeIndicator.BeginWidth = New NLength(1)
    rangeIndicator.EndWidth = New NLength(10)
    rangeIndicator.StrokeStyle.Width = New NLength(0)
    rangeIndicator.FillStyle = New NGradientFillStyle(GradientStyle.StartToEnd, GradientVariant.Variant2, Color.FromArgb(255, 204, 0, 0), Color.FromArgb(1, 255, 255, 255))
    radialGauge.Indicators.Add(rangeIndicator)
  
    ' configure axis
    Dim axis As NGaugeAxis = DirectCast(radialGauge.Axes(0), NGaugeAxis)
    axis.Range = New NRange1DD(0, 100)
  
    ' modify the anchor so that labels appear after the scale
    axis.Anchor = New NDockGaugeAxisAnchor(GaugeAxisDockZone.Top, True, RulerOrientation.Left, 3, 97)
  
    ' configure and apply settings to the gauge scale
    Dim scale As NStandardScaleConfigurator = DirectCast(axis.ScaleConfigurator, NStandardScaleConfigurator)
    'scale.SetPredefinedScaleStyle(PredefinedScaleStyle.PresentationNoStroke);
    scale.RulerStyle.Shape = ScaleLevelShape.Bar
    scale.RulerStyle.Height = New NLength(3)
    scale.RulerStyle.Offset = New NLength(0)
    scale.RulerStyle.BorderStyle.Width = New NLength(0)
    scale.RulerStyle.FillStyle = New NColorFillStyle(Color.White)
  
    scale.LabelStyle.TextStyle.FontStyle = New NFontStyle("Verdana", 8, FontStyle.Bold)
    scale.LabelStyle.TextStyle.ShadowStyle.Type = ShadowType.GaussianBlur
    scale.LabelStyle.TextStyle.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
    scale.LabelStyle.TextStyle.ShadowStyle.Offset = New NPointL(1, 1)
    scale.LabelStyle.TextStyle.ShadowStyle.FadeLength = New NLength(1)
    scale.LabelStyle.TextStyle.ShadowStyle.Scale = 1
    scale.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.White)
    scale.LabelStyle.Angle = New NScaleLabelAngle(ScaleLabelAngleMode.View, 0, True)
    scale.LabelStyle.Offset = New NLength(0)
  
    ' configure the scale ticks
    scale.OuterMajorTickStyle.Visible = False
    scale.OuterMinorTickStyle.Visible = False
    scale.MajorTickMode = MajorTickMode.AutoMinDistance
    scale.MinTickDistance = New NLength(25)
    scale.MinorTickCount = 3
  
    scale.InnerMajorTickStyle.Shape = ScaleTickShape.Triangle
    scale.InnerMajorTickStyle.Length = New NLength(10)
    scale.InnerMajorTickStyle.Width = New NLength(3)
    scale.InnerMajorTickStyle.LineStyle.Width = New NLength(0)
    scale.InnerMajorTickStyle.FillStyle = New NColorFillStyle(Color.White)
    scale.InnerMajorTickStyle.Offset = New NLength(0)
  
    scale.InnerMinorTickStyle.Shape = ScaleTickShape.Ellipse
    scale.InnerMinorTickStyle.Length = New NLength(2)
    scale.InnerMinorTickStyle.Width = New NLength(2)
    scale.InnerMinorTickStyle.LineStyle.Width = New NLength(0)
    scale.InnerMinorTickStyle.FillStyle = New NColorFillStyle(Color.White)
    scale.InnerMinorTickStyle.Offset = New NLength(-1)
End Sub

 

Article ID: 111, Created On: 11/3/2010, Modified: 12/1/2010