Runtime Customization in C1Gauges

Display is one of the top factors that catches the eye of users. C1Gauges provides a very attractive way to display information graphically. In this blog we will be implementing the 'Styling of Gauges'. C1Gauges is a collection of small parts which can be picked and painted to which ever color you want. This flexibility undoubtedly proves to be a plus point of the control. The control has some designer windows which makes it quite easy to fill in your favorite colors in the Gauge but what if you want to implement the same in code? Even though the implementation is not too complex, it may become troublesome for the ones who are not so familiar with C1Gauges. The following instruction will help you with the implementation of customizing C1Gauges through code. So, lets just go through the parts we will be customizing in this blog:

  1. Border
  2. Small Markings
  3. Large Markings
  4. Pointer
  5. Background

While implementing a few of the above, we will actually be customizing the FaceShapes and the CoverShapes of C1Gauges. C1GaugeV Let's have a sneak peek as to what exactly needs to be done to customize each of the above mentioned parts:

1. Customizing the BORDER

It is the GaugeRectangle which actually forms the Border of the Gauge. Now, the Border can be customized as below: 

C1GaugeRectangle1.Border.Color = System.Drawing.Color.Gray;  
C1GaugeRectangle1.Border.Thickness = 1.0;  
C1GaugeRectangle1.CenterPointX = 0.525;  
C1GaugeRectangle1.CornerRadius = 10.0;  
C1GaugeRectangle1.Height = -1.1;  
C1GaugeRectangle1.HitTestable = false;  
C1GaugeRectangle1.Width = -1.2;  
C1GaugeRectangle1.Filling.BrushType = C1.Win.C1Gauge.C1GaugeBrushType.Gradient;  
C1GaugeRectangle1.Gradient.Direction = C1.Win.C1Gauge.C1GaugeGradientDirection.Vertical;  
C1GaugeRectangle1.Filling.Color = Color.Gray;  
C1GaugeRectangle1.Filling.Color2 = Color.Gray;

2. Customizing the Small Markings

The Small Markings of the Gauge is one of the members of the 'Decorators Collection' in C1Gauges. It holds the second index in the Collection. The Small Markings can be customized as in the below code: 

c1LinearGauge1.Decorators[2].ValueColors.Add(c1GaugeValueColor2);  
c1LinearGauge1.Decorators[2].ValueColors[0].Value = 100;  
c1GaugeValueColor2.Color = Color.Red;

3. Customizing the Large Markings

The Large Markings of the Gauge is also one of the 'Decorators'. It holds the first index in the 'Decorator Collection'. It can be customized as in the below code: 

c1LinearGauge1.Decorators[1].ValueColors.Add(c1GaugeValueColor1);  
c1LinearGauge1.Decorators[1].ValueColors[0].Value = 100;  
c1GaugeValueColor1.Color = Color.Black;

4. Customizing the Pointer

The Pointer of the Main Gauge can be customized as below: 

c1LinearGauge1.Pointer.Filling.Color = Color.Blue;

5. Customizing the Background of the Gauge

The Background of C1Gauges is another GaugeRectangle and it can be customized as below: 

C1GaugeRectangle2.Filling.BrushType = C1.Win.C1Gauge.C1GaugeBrushType.Gradient;  
C1GaugeRectangle2.Border.Color = Color.Yellow;  
C1GaugeRectangle2.Filling.Color = Color.Yellow;  
C1GaugeRectangle2.Filling.Color2 = Color.Yellow;  
C1GaugeRectangle2.Border.Thickness = 1.0;  
C1GaugeRectangle2.CenterPointX = 0.525;  
C1GaugeRectangle2.CornerRadius = 8.0;  
C1GaugeRectangle2.Height = -0.95;  
C1GaugeRectangle2.HitTestable = false;  
C1GaugeRectangle2.Width = -1.15;

With just a few lines of code you have customized C1Gauge. Your next step is to catch hold of a great color combination to make the Gauge look more attractive and refer to this blog so implementation won't be an issue ;) Download Sample VB Download Sample C#

MESCIUS inc.

comments powered by Disqus