BulletGraph Quick Start

This section describes how to add a BulletGraph control to your portable or shared app and set its value. For information on how to add Xuni components in C# or XAML, see Adding Xuni Components using C# or Adding Xuni Components using XAML.

This topic comprises of three steps:

Step 1: Add a BulletGraph control
Step 2: Run the Project

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: XuniBulletGraph.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 in C# or in XAML.

In Code

Add a new class (for example QuickStart.cs) to your Portable / Shared project and include Xuni Gauge and Xamarin references as shown below.
C#
Copy Code
using Xuni.Xamarin.Gauge; using Xamarin.Forms;

C#	Copy Code
using Xuni.Xamarin.Gauge; using Xamarin.Forms;

Instantiate a BulletGraph control in a new method GetBulletGraph()(or GetRadialGauge() / GetBulletGraph()).

C#	Copy Code
public static XuniBulletGraph GetBulletGraph() { //Instantiate BulletGraph and set its properties XuniBulletGraph gauge = new XuniBulletGraph(); gauge.Value = 80; gauge.HeightRequest = 25; gauge.WidthRequest = 50; gauge.Min = 0; gauge.Max = 100; gauge.Thickness = 0.1; gauge.Direction =LinearGaugeDirection.Right; gauge.PointerColor = Color.Black; //Set its Good Bad and Target gauge.Good = 100; gauge.GoodRangeColor = Color.FromHex("#CCCCCC"); gauge.Bad = 50; gauge.BadRangeColor = Color.FromHex("#666666"); gauge.Target = 75; gauge.TargetColor = Color.Black; return gauge; }

Copy Code

public static XuniBulletGraph GetBulletGraph()
{
    //Instantiate BulletGraph and set its properties
    XuniBulletGraph gauge = new XuniBulletGraph();
    gauge.Value = 80;
    gauge.HeightRequest = 25;
    gauge.WidthRequest = 50;
    gauge.Min = 0;
    gauge.Max = 100;
    gauge.Thickness = 0.1;
    gauge.Direction =LinearGaugeDirection.Right;
    gauge.PointerColor = Color.Black;

    //Set its Good Bad and Target
    gauge.Good = 100;
    gauge.GoodRangeColor = Color.FromHex("#CCCCCC");
    gauge.Bad = 50;
    gauge.BadRangeColor = Color.FromHex("#666666");
    gauge.Target = 75;            
    gauge.TargetColor = Color.Black;
   
    return gauge;
}

In XAML

Add a new Forms XAML Page (for example QuickStart.xaml) to your Portable or Shared project and modify the <ContentPage> tag to include Xuni reference as shown below.

XAML	Copy Code
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Xamarin.Gauge;assembly=Xuni.Xamarin.Gauge">

XAML

Copy Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Appl.QuickStart"
xmlns:xuni="clr-namespace:Xuni.Xamarin.Gauge;assembly=Xuni.Xamarin.Gauge">

Initialize a BulletGraph control by adding the markup for the control between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags, as shown below:

XAML	Copy Code
<StackLayout> <xuni:XuniBulletGraph Value="80" Min="0" Max="100" HeightRequest="50" WidthRequest="50" Thickness="0.1" Good="100" GoodRangeColor="#CCCCCC" Bad="50" BadRangeColor="#666666" Target="75" TargetColor="Black" PointerColor="Black" Direction="Right"> </xuni:XuniBulletGraph> </StackLayout>

XAML

Copy Code

<StackLayout>
  <xuni:XuniBulletGraph Value="80" Min="0" Max="100" HeightRequest="50" WidthRequest="50"
  Thickness="0.1" Good="100" GoodRangeColor="#CCCCCC" Bad="50" BadRangeColor="#666666" Target="75"
  TargetColor="Black" PointerColor="Black" Direction="Right">
  </xuni:XuniBulletGraph>
</StackLayout>

Step 2: Run the Project

In the Solution Explorer, double click App.cs to open it.
Complete the following steps to display the BulletGraph control.
- To return a C# class: In the class constructor App(), set a new ContentPage as the MainPage and assign the control to the ContentPage's Content by invoking the method GetBulletGraph() defined in the previous procedure, Step 1: Add a BulletGraph Control.
  The following code shows the class constructor App() after completing steps above.
  C#
  Copy Code
  
  public App() { // The root page of your application MainPage = new ContentPage { Content = QuickStart.GetBulletGraph() }; }
- To return a Forms XAML Page: In the class constructor App(), set the Forms XAML Page QuickStart as the MainPage.
  The following code shows the class constructor App(), after completing this step.
  C#
  Copy Code
  
  public App() { // The root page of your application MainPage = new QuickStart(); }
Some additional steps are required to run the iOS and WinPhone apps:
- iOS App:
  1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project, to open it.
  2. Add the following code to the FinishedLaunching() method.
    C#
    Copy Code
    
    Xuni.Xamarin.Gauge.Platform.iOS.Forms.Init();
- WinPhone App:
  1. In the Solution Explorer, expand MainPage.xml.
  2. Double click MainPage.xml.cs to open it.
  3. Add the following code to the class constructor.
    C#
    Copy Code
    
    Xuni.Xamarin.Gauge.Platform.WinPhone.GaugeRenderer.Init();
Press F5 to run the project.
Back to Top