Xamarin.iOS Documentation | ComponentOne
Controls / Gauge / Quick Start: Add and Configure / BulletGraph Quick Start
In This Topic
    BulletGraph Quick Start
    In This Topic

    This section describes how to add a C1BulletGraph 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 three steps:

    The following image shows how the BulletGraph appears, after completing the steps above.

    Step 1: Add a BulletGraph 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 be able to edit the value by tapping on the Gauge.

    Note: The origin property can be used to change the origin of the BulletGraph pointer. By default, the origin is set to 0.

    Complete the following steps to initialize a BulletGraph control.

    Add a BulletGraph 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 icon in the toolbar to open the Identity inspector.
    3. Under Custom Class, change the class from UI View to BulletGraph using drop-down.

    Initialize the BulletGraph control in Code

    To initialize the BulletGraph 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 BulletGraph.

    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;
    
            C1BulletGraph bulletGraph;
            public override void ViewDidLoad()
            {
                base.ViewDidLoad();
                this.EdgesForExtendedLayout = UIRectEdge.None;
                bulletGraph = new C1BulletGraph();
                bulletGraph.Bad = 20;
                bulletGraph.Good = 75;
                bulletGraph.Target = 70;
                View.BackgroundColor = bulletGraph.BackgroundColor = UIColor.White;
                this.Add(bulletGraph);
            }
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                bulletGraph.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Height / 3,
                             this.View.Frame.Width, this.View.Frame.Height / 6);
            }
        }
    }
    

    Back to Top

    Step 2: Run the Application

    Press F5 to run the application.

    Back to Top

    See Also