Skip to main content Skip to footer

Getting Started with Xuni Bullet Graph 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 Bullet Graph. 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:

  1. Select File -> New -> Project
  2. Next, under installed templates, select Visual C# -> Mobile Apps
  3. Select Blank App (either Xamarin.Forms Portable or Xamarin.Forms Shared)
  4. Name your application, set the file location, and click OK to save it

BulletGraphFirst 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:

  1. Select Project -> Manage Nuget Packages
  2. Click Online on the left and select GrapeCity
  3. Install all of the desired packages for your application ( Xuni.Core, and Xuni.Gauge in this example )

BulletGraphSecond Now, we can start adding some code to our project. First, we will create a new class called NewGauge.cs BulletGraphThird Inside this class (NewGauge.cs) we can add the following code:

using Xuni.Xamarin.Gauge;  
using Xamarin.Forms;  

Instantiate a Bullet Graph control in a new method GetBulletGraph().

public static XuniBulletGraph GetBulletGraph()  
//Instantiate BulletGraph and set its properties  
XuniBulletGraph gauge = new XuniBulletGraph();  
gauge.Value = 35;  
gauge.HeightRequest = 50;  
gauge.WidthRequest = 50;  
gauge.Min = 0;  
gauge.Max = 100;  
gauge.Thickness = 0.1;  
gauge.Direction = XuniLinearGaugeDirection.Right;  

//Set its Good Bad and Target  
gauge.Good = 100;  
gauge.GoodRangeColor = Color.Purple;  
gauge.Bad = 50;  
gauge.BadRangeColor = Color.Gray;  
gauge.Target = 40;  
gauge.TargetColor = Color.White;  
return gauge;  

We’re now able to add the Bullet Graph control into a new Forms XAML page. BulletGraphForth Add a new class ( in this sample we will use FirstBulletGraph.Xaml ) and modify the code behind as follows:

<ContentPage xmlns=""  

From here we can instantiate the Bullet Graph control and set the binding context for the Graph.

<xuni:XuniBulletGraph Value="35" Min="0" Max="100" HeightRequest="50" WidthRequest="50"  
Thickness="0.1" Good="100" GoodRangeColor="Purple" Bad="50" BadRangeColor="Gray" Target="40"  

We’re now approaching the point where we can run the Project. We need to adjust the App.cs code to load our Graph control. The following changes are necessary in order for the Graph to load on the Main Page:

MainPage = new ContentPage  
Content = NewGauge.GetBulletGraph()  

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:


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:


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. BulletGraphAndriod Resources:


comments powered by Disqus