Getting Started with Xuni LinearGauge for Xamarin.Forms
Xuni is our collection of cross-platform mobile controls which allow users to provide native experiences on Android, iOS, and Windows Phone. Our new Xuni Gauge Control is comprised of three types of gauges, Linear, Radial and Bullet. This guide is meant to be a reference source for creating an initial Xamarin.Forms project in Microsoft Visual Studio using a Xuni Gauge Control. Before we create our application, let’s talk about each Gauge control and their common use cases. Linear Gauge: A linear gauge displays the value along a linear scale, using a linear pointer. The linear scale can be either horizontal or vertical, and the orientation may be set using the RotationX property. A linear gauge is commonly used to denote data as a scale value such as length, temperature, etc. Radial Gauge: A radial gauge displays the value along a circular scale, using a curved pointer. The scale can be rotated as defined by the StartAngle and EndAngle properties. A radial gauge is commonly used to denote data such as volume, velocity, etc. Bullet Graph: A bullet graph displays a single value on a linear scale, along with a target value and ranges that instantly indicate whether the value is good, bad or in some other state. A bullet graph is a variant of a linear gauge, designed specifically for use in dashboards that display a number of single value data, such as yearly sales revenue. Now that we have a basic understanding of the three different Gauge Controls, let’s go ahead and create a Linear Gauge. _Note the beta version was used here, the logo will now appear as the Xuni Butterfly. _ First, you will need to create a Xamarin.Forms project. This can be accomplished through the following steps:
- Select File -> New -> Project
- Next, under installed templates, select Visual C# -> Mobile Apps
- Select Blank App (either Xamarin.Forms Portable or Xamarin.Forms Shared)
- Name your application, set the file location, and click OK to save it
Next, we will need to add a few Xuni references to the project in order for us to use the controls. This will only require a few steps and should be a familiar process for anyone who has used Nuget Packages in the past:
- Select Project -> Manage Nuget Packages
- Click Online on the left and select GrapeCity
- Install all of desired packages for you application ( Xuni.Core, and Xuni.Gauge in this example)
Now, we can start adding some code to our project. First, we will create a new class called NewGauge.cs 
Inside this class (NewGauge.cs) we can add the following code:
using Xuni.Xamarin.Gauge;
using Xamarin.Forms;
Instantiate a LinearGauge control in a new method GetLinearGauge().
class NewGauge
{
public static XuniLinearGauge GetLinearGauge()
{
// Instantiate LinearGauge and set its properties
XuniLinearGauge gauge = new XuniLinearGauge();
gauge.HeightRequest = 50;
gauge.WidthRequest = 50;
gauge.Value = 35;
gauge.Thickness = 0.1;
gauge.Min = 0;
gauge.Max = 100;
gauge.Direction = XuniLinearGaugeDirection.Right;
//Create Ranges
GaugeRange low = new GaugeRange();
GaugeRange med = new GaugeRange();
GaugeRange high = new GaugeRange();
//Customize Ranges
low.Color = Color.Red;
low.Min = 0;
low.Max = 40;
med.Color = Color.Yellow;
med.Min = 40;
med.Max = 80;
high.Color = Color.Green;
high.Min = 80;
high.Max = 100;
//Add Ranges to Gauge
gauge.Ranges.Add(low);
gauge.Ranges.Add(med);
gauge.Ranges.Add(high);
return gauge;
}
}
We’re now able to add the LinearGauge control into a new Forms XAML page. 
Add a new class ( in this sample we will use NewGauge.Xaml ) and modify the code behind as follows:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FirstLinearGauge.FirstGauge"
xmlns:xuni="clr-namespace:Xuni.Xamarin.LinearGauge;assembly=Xuni.Xamarin.LinearGauge">
From here we can instantiate the Gauge control and set the binding context for the Gauge.
<StackLayout>
<xuni:XuniLinearGauge Name="gauge" Value="35" Min="0" Max="100" Thickness="0.1"
HeightRequest="50" WidthRequest="50">
<xuni:XuniLinearGauge.Ranges>
<xuni:GaugeRange Min="0" Max="40" Color="Red"/>
<xuni:GaugeRange Min="40" Max="80" Color="Yellow"/>
<xuni:GaugeRange Min="80" Max="100" Color="Green"/>
</xuni:XuniLinearGauge.Ranges>
</xuni:XuniLinearGauge>
</StackLayout>
We’re now approaching the point where we can run the Project. We need to adjust the App.cs code to load our Gauge control. The following changes are necessary in order for the Gauge to load on the Main Page:
public App()
{
// The root page of your application
MainPage = new ContentPage
{
Content = NewGauge.GetLinearGauge()
};
}
Finally, there are a few small platform specific changes that are necessary. For iOS applications, you will need to add a line to AppDelegate.cs within the .iOS solution. Inside the method FinishedLaunching() add the following line:
Xuni.Xamarin.Gauge.Platform.iOS.Forms.Init();
Windows Phone applications will also require a small change. Within the .WinPhone application, open up the MainPage.xaml.cs and add the following code to the class constructor:
Xuni.Xamarin.Gauge.Platform.WinPhone.FlexChartRenderer.Init();
Finally the project should be properly licensed before to avoid nag screens at run time. There are detailed instructions posted on our licensing page. You should now be able to pick a startup project for the platform you want to work with, run the project and view your application in action on your platform of choice. 
Resources:
GrapeCity