# LinearGauge Quick Start

## Content



This section describes how to add a [LinearGauge](/componentone/docs/xamarin/online-ios/) control to your iOS app and set its value. For information on how to add Xamarin controls, see [Creating a New Xamarin.iOS App](/componentone/docs/xamarin/online-ios/overview/CreatingaNewXamarin.iOSApp).

This topic comprises of two steps:

*   [Step 1: Add a LinearGauge control](/componentone/docs/xamarin/online-ios/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStart#step-1-add-a-lineargauge-control)
*   [Step 2: Run the Application](/componentone/docs/xamarin/online-ios/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStart#step-2-run-the-application)

The following image shows how the LinearGauge appears after completing the steps above:

![](https://cdn.mescius.io/document-site-files/images/1398d806-ac3c-4763-a9b3-2c7a2f5b49fb/images/lineargaugeqs.png)

### Step 1: Add a LinearGauge control

The value property denotes the value of the gauge. Multiple ranges can be added to a single Gauge and the position of the range is defined by the [min](/componentone/docs/xamarin/online-ios/) and [max](/componentone/docs/xamarin/online-ios/) properties of the range. If you set the Gauge's [isReadOnly](/componentone/docs/xamarin/online-ios/) property to false, then the user is able to edit the value by tapping on the gauge.


> type=note
> **Note**: The [origin](/componentone/docs/xamarin/online-ios/) property can be used to change the origin of the Gauge pointer. By default, the origin is set to 0.

Complete the following steps to initialize a LinearGauge control in C#.

#### Add a LinearGauge control in View

1.  In the **Project Navigator**, click `MainStoryboard` to open the storyboard editor.
2.  In the right-most pane of the storyboard editor, click ![XCode_Identity Inspector Icon](https://cdn.mescius.io/document-site-files/images/1398d806-ac3c-4763-a9b3-2c7a2f5b49fb/images/identityinspectoricon.png) icon in the toolbar to open the **Identity inspector**.
3.  Under **Custom Class**, change the class from **UI View** to **LinearGauge** using drop-down.

#### Initialize the LinearGauge control in Code

To initialize the **LinearGauge** control, open the ViewController.cs file from the Project Navigator and replace its content with the code below. This overrides the **viewDidLoad** method of the View controller in order to initialize LinearGauge.

```csharp
using C1.iOS.Gauge;
using CoreGraphics;
using System;
using UIKit;
namespace GaugeTest
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }
        private const double DefaultValue = 25;
        private const double DefaultMin = 0;
        private const double DefaultMax = 100;
        C1LinearGauge linearGauge;
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.EdgesForExtendedLayout = UIRectEdge.None;
            linearGauge = new C1LinearGauge();
            linearGauge.Value = DefaultValue;
            linearGauge.Thickness = 0.1;
            linearGauge.Min = DefaultMin;
            linearGauge.Max = DefaultMax;
                        linearGauge.ShowRanges = true;
            linearGauge.PointerColor = UIColor.Blue;
            this.View.BackgroundColor = linearGauge.BackgroundColor = UIColor.White;
            GaugeRange low = new GaugeRange();
            GaugeRange med = new GaugeRange();
            GaugeRange high = new GaugeRange();
            //Customize Ranges
            low.Color = UIColor.Red;
            low.Min = 0;
            low.Max = 40;
            med.Color = UIColor.Yellow;
            med.Min = 40;
            med.Max = 80;
            high.Color = UIColor.Green;
            high.Min = 80;
            high.Max = 100;
            //Add Ranges to Gauge
            linearGauge.Ranges.Add(low);
            linearGauge.Ranges.Add(med);
            linearGauge.Ranges.Add(high);
            this.Add(linearGauge);
        }
        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            linearGauge.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Y,
                         this.View.Frame.Width, this.View.Frame.Height / 6);
        }
    }
}  
```

### Step 2: Run the Application

Press **F5** to run the application.

## See Also

[Gauge Types](/componentone/docs/xamarin/online-ios/controls/gaugeOverview/gaugeTypes)