LinearGauge Quick Start

In This Topic

This section describes how to add a LinearGauge control to your iOS app and set its value. For information on how to add Xamarin controls, see Creating a New Xamarin.iOS App.

This topic comprises of two steps:

Step 1: Add a LinearGauge control
Step 2: Run the Application

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

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 and max properties of the range. If you set the Gauge's isReadOnly property to false, then the user is able to edit the value by tapping on the gauge.

Note: The origin 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

In the Project Navigator, click MainStoryboard to open the storyboard editor.
In the right-most pane of the storyboard editor, click icon in the toolbar to open the Identity inspector.
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.

C#	Copy Code
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); } } }

Copy Code

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.