Quick Start Guide for Xamarin.iOS

Introduction

The following guide will get you up and running with the SGauge component as quickly as possible. In this guide, we will introduce you to the key features of the Gauge, including initial project setup and configuring the style. It may help to follow along with our related code sample: GettingStarted.sln.

Getting Set Up

Start up Xamarin Studio and create a new project (File / New / Solution) then select C# / iOS / Universal / Single View Application as your solution type. Name your solution GettingStarted.

Within your newly created project, add a reference to the ShinobiGauges.dll. To do this, right click the References folder under your newly created project and choose Edit References…, then selected .Net Assembly and browse to where you have saved the ShinobiGauges.dll. Be sure to click Add after selecting the dll to add it to your project, and close the window.

To check you have done all of this correctly, expand the References folder in the Solution Pad and you should see the ShinobiGauges.dll listed as a reference.

Creating a Gauge

The first step is to create an instance of the gauge and add it to the view. Open up the GettingStartedViewController.cs file and add the following using statement:

using Shinobi.Gauges;

Further down the same file add a member variable for the gauge:

public partial class GaugesGettingStartedViewController : UIVIewController
{
    SGaugeRadial _gauge;
    …

In ViewDidLoad, create the Gauge instance as follows:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    ShinobiGauges.trialKey = ""; // Add trial key here.

    // Create the Gauge.
    _gauge = new SGaugeRadial (new RectangleF (0, 0, 400, 400), 0, 1000);
    _gauge.Center = View.Center;
    View.AddSubview (_gauge);
}

At this point, build and run the project to check that everything has been set up correctly. You should see something similar to the gauge below:

Configuring the Gauge

The gauge has been built with styling in mind, allowing you to change virtually every aspect of the gauge, needle and the axis. For more information, see the documentation for the class SGaugeStyle.

Instead of the default style, apply the Dashboard style as follows:

public override void ViewDidLoad ()
{
    …
    _gauge.Style = new SGaugeDashboardStyle ();
}

Next, make the range take up more of the circle by setting the start and end angle of the axis arc:

public override void ViewDidLoad ()
{
    …
    _gauge.ArcAngleStart = (float)-Math.PI * 3 / 4;
    _gauge.ArcAngleEnd = (float)Math.PI * 3 / 4;
}

Thicken the bevel around the edge:

public override void ViewDidLoad ()
{
    …
    _gauge.Style.BevelWidth = 30;
}

Finally, give the gauge a value:

public override void ViewDidLoad ()
{
    …
    _gauge.Value = 375;
}

Now build and run your project and your gauge should look like the following:

This is only a small demonstration of what the Gauge can do, there are plenty of options to allow you to customize it exactly how you need it. If you got stuck at any point, take a look at our related code sample: GettingStarted.sln