[]
DEMOS DOCS API SAMPLES DOWNLOAD
(Showing Draft Content)

Gauges for WinForms Quick Start

In this section you'll learn how to use the basic Gauges for WinForms functionality to create a simple application with a custom gauge control. This section is not intended to be a comprehensive tutorial of all features of Gauges for WinForms, but rather provide a quick introduction and highlight some general approaches to using the product.

In the following quick start guide, you'll create an application, add a gauge control to the application, and customize the appearance of the control.

Let's say the user wants to create a radial gauge for a car dashboard just like given in the snapshot below. The Gauge control provides various classes and properties to customize the control.

.NET

To create a WinForms application in .NET for Gauge control, complete the following steps:

Creating the Application

  1. Create a new Windows Forms application.

  2. Switch to code view. Create a Gauge and add it to the form.

    //create a C1 guage
C1Gauge gauge = new C1Gauge();
gauge.Dock = DockStyle.Fill;
// Add the control to form
Controls.Add(gauge);

  3. Create a Radial Gauge and add it to the Gauge control using the Add method of GaugeCollection class.

    //create a radial guage
C1RadialGauge radialGauge = new C1RadialGauge();
// Add the radial gauge to the c1gauge
gauge.Gauges.Add(radialGauge);

Customizing the Gauge control

  1. Add ellipse shape to create the background for Gauge. Set the border and fill color.

    //add faceshapes
//add an ellipse to create the gauge background
C1GaugeEllipse ellipse = new C1GaugeEllipse();
//set border
ellipse.Border.Thickness = 5;
ellipse.Border.Color = Color.SkyBlue;
//set fill
ellipse.Filling.Color = Color.AliceBlue;

  2. Add a caption for the Gauge.

    //add a caption
C1GaugeCaption caption = new C1GaugeCaption();
caption.Text = "C1Gauge Sample";
caption.Color = Color.Gray;
caption.CenterPointY = 0.85;
caption.FontSize = 10;

  3. Add the ellipse and caption using the FaceShapes property.

    radialGauge.FaceShapes.Add(ellipse);
radialGauge.FaceShapes.Add(caption);

  4. Add decorators, namely range, marks and labels, customize them and add them to the Radial Gauge using the Decorators property.

    //add decorators
//create and customize Range
C1GaugeRange range = new C1GaugeRange();
range.Width = 2;
range.Location = 95;
range.Alignment = C1GaugeAlignment.In;
range.Border.Color = Color.Gray;
range.Filling.Color = Color.Gray;
//create and customize Marks
C1GaugeMarks marks = new C1GaugeMarks();
marks.Width = 4;
marks.Length = 9;
marks.Interval = 10;
marks.Location = 95;
marks.Alignment = C1GaugeAlignment.In;
marks.Border.Color = Color.Gray;
marks.Filling.Color = Color.Gray;
//create and customze labels
C1GaugeLabels labels = new C1GaugeLabels(); 
labels.Interval = 10;
labels.Location = 80;
labels.Color = Color.Gray;
radialGauge.Decorators.Add(labels);
radialGauge.Decorators.Add(marks);
radialGauge.Decorators.Add(range);

  5. Fill color in Pointer and Cap.

    //customize cap and pointer
radialGauge.Pointer.Filling.Color = Color.LightGoldenrodYellow;
radialGauge.Cap.Filling.Color = Color.Gray;

Running the Application

  1. Click Build | Build Solution to build the project.
  2. Press F5 to run the project.

.NET Framework

Creating the Application

In this step you'll create a simple application using the C1Gauge control. You'll then customize the appearance of your application in Design view without adding any code to your project.

To begin, complete the following steps:

  1. In Visual Studio, select File | New | Project.
  2. In the New Project dialog box, select a language in the left pane, and in the templates list select Windows Forms Application. Enter a Name for your project and click OK. The project will be created and a form will appear.
  3. Navigate to the Toolbox and double-click the C1Gauge item to add a C1Gauge control to the form. When you double-click the C1Gauge item, the New Gauge Gallery dialog box will open.
  4. On the Radial Gauges tab, select (empty).
  5. Click OK to close the dialog box.

What You've Accomplished

In this step you created an application and added a C1Gauge control to the form. The gauge is currently displayed with default settings; in the next step you'll further customize the appearance of the control.

Customizing the Gauge control

In the last step you created new application and added a C1Gauge control to the form. In this step you'll customize the gauge by using the Gauges for WinForms designers.

To customize the C1Gauge control, complete the following steps:

  1. Double-click the C1Gauge1 control on the form. The Item Editor appears.
  2. Set the Maximum property to 120. The gauge scale will now run from 0 to 120.

Adding Tick Marks

  1. Click the ellipsis button next to the Decorators property. The Decorators Collection Editor appears.
  2. Click the drop-down list on the Add button and select C1GaugeMarks.
  3. Expand the Filling node and set the Color property to DarkGray.
  4. Set the Interval property to 10. This will create tick marks at every 10th interval. Next we will add minor tick marks.
  5. Click the drop-down list on the Add button again and select C1GaugeMarks.
  6. Set the Interval property to 2.5.
  7. Expand the Filling node and set the Color property to DarkGray.
  8. Set the Length property to 5. Next we will add tick labels.

Adding Tick Labels

  1. Click the drop-down list on the Add button and select C1GaugeLabels.
  2. Set the Color property to Black.
  3. Set the Interval property to 10. This will create tick labels at every 10th interval.
  4. Set the From property to 20. This will add the labels on value 20 and higher.
  5. Click OK to close the Decorators Collection Editor.

Customize the Pointer, Cap, Ellipse and Caption

  1. In the Item Editor, expand the Filling node within the Pointer node, and set the Color property to Black.
  2. Expand the Filling node within the Cap node, and set the Color property to DarkGray.
  3. Click the ellipsis button next to FaceShapes. The FaceShapes Collection Editor opens.
  4. Click the Add drop-down arrow and select C1GaugeCaption.
  5. Enter C1Gauge next to the Text property.
  6. Set the Color property to Red.
  7. Enter .9 next to the CenterPointY property. This will move the text down the gauge.
  8. Click OK to close the FaceShapes Collection Editor and click OK again to close the Item Editor.

What You've Accomplished

You've customized the appearance of the C1Gauge control. Next you will run the application.

Running the Application

In the previous steps you've created a new application, added a C1Gauge control to the form, and customized the control. All that's left is to run the application!

Select Debug | Start Debugging from the Visual Studio menu.

What You've Accomplished

Congratulations! You have successfully created a C1Gauge control. There are many templates you can apply to your gauge. See Gauges for WinForms Appearance for more information.

type=note

Note: The latest version of WinForms .NET Edition does not include rich design-time support yet. We will enhance it in the future releases.