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.

   C#	コードのコピー
   //C1Gauageを作成します。 C1Gauge gauge = new C1Gauge(); gauge.Dock = DockStyle.Fill; //フォームにコントロールを追加します。 Controls.Add(gauge);

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

   C#	コードのコピー
   //放射状ゲージを作成します。 C1RadialGauge radialGauge = new C1RadialGauge(); //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.

   C#	コードのコピー
   //フェイスの形状を追加します。 //楕円を追加してゲージの背景を作成します。 C1GaugeEllipse ellipse = new C1GaugeEllipse(); //枠線を設定します。 ellipse.Border.Thickness = 5; ellipse.Border.Color = Color.SkyBlue; //塗りつぶしを設定します。 ellipse.Filling.Color = Color.AliceBlue;

2. Add a caption for the Gauge.

   C#	コードのコピー
   //キャプションを追加します。 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.

   C#	コードのコピー
   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.

   C#

   コードのコピー

   //デコレータを追加します。 //範囲を作成してカスタマイズします。 C1GaugeRange range = new C1GaugeRange(); range.Width = 2; range.Location = 95; range.Alignment = C1GaugeAlignment.In; range.Border.Color = Color.Gray; range.Filling.Color = Color.Gray; //マークを作成してカスタマイズします。 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; //ラベルを作成してカスタマイズします。 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.

   C#	コードのコピー
   //キャップとポインタをカスタマイズします。 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.

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 10^th 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 10^th 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.