# Gauges for WinForms Quick Start Understand how to create a simple application with a custom gauge control. Learn more about creating gauges in the Gauges for WinForms documentation. ## Content 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. ![](https://cdn.mescius.io/document-site-files/images/2003d53a-81bd-40aa-82c0-56cd09293e5d/images/blue-gauge.png) ### .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. ```csharp //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](/componentone/docs/win/online-gauges/) method of [GaugeCollection](/componentone/docs/win/online-gauges/) class. ```csharp //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. ```csharp //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. ```csharp //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. ```csharp 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. ```csharp //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. ```csharp //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](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/). 3. Expand the **Filling** node and set the [Color](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/). 2. Set the [Color](/componentone/docs/win/online-gauges/) property to **Black**. 3. Set the Interval property to **10**. This will create tick labels at every 10th interval. 4. Set the [From](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/) property. 6. Set the Color property to **Red**. 7. Enter **.9** next to the [CenterPointY](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/) 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](/componentone/docs/win/online-gauges/gaugesforwinformsapp) 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.