# BulletGraph Quick Start

## Content

This section describes how to add a BulletGraph to your portable or shared app and set its value. For information on how to add Xamarin components in C# or XAML, see [Adding Xamarin Components using C#](/componentone/docs/xamarin/online-forms/overview/AddingComponentstoanApp) or [Adding Xamarin Components using XAML](/componentone/docs/xamarin/online-forms/overview/AddComponentsusingXAML).

This topic comprises of three steps:

* [Step 1: Add a BulletGraph control](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartBulletGraph#step-1-add-a-bulletgraph-control)
* [Step 2: Run the Project](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartBulletGraph#step-2-run-the-project)

The following image shows a BulletGraph.

![](https://cdn.mescius.io/document-site-files/images/fb6b46a2-eac0-487c-84c3-5e1b4c7b1348/images/gaugequickstartbg.png)

### 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](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1Gauge.Min.html) and [Max](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1Gauge.Max.html) properties of the range. If you set the [IsReadOnly](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1Gauge.IsReadOnly.html) property to **false**, then the user can edit the value by tapping on the gauge.

>type=note
> **Note**: The [C1BulletGraph.Origin](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1Gauge.Origin.html) 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

1. Add a new class (for example QuickStart.cs) to your portable or shared project and include the following references:

    ```csharp
    using Xamarin.Forms;
    using C1.Xamarin.Forms.Gauge;
    ```
2. Instantiate a BulletGraph control in a new method, GetBulletGraph( ).

    ```csharp
    public static C1BulletGraph GetBulletGraph()
    {
        //Instantiate BulletGraph and set its properties
        C1BulletGraph gauge = new C1BulletGraph();
        gauge.Value = 80;
        gauge.Min = 0;
        gauge.Max = 100;
        gauge.Thickness = 0.1;
        gauge.Direction = LinearGaugeDirection.Right;
        gauge.PointerColor = Xamarin.Forms.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 = Xamarin.Forms.Color.Black;
        return gauge;
    }
    ```

#### In XAML

1. Add a new Content Page (for example QuickStart.xaml) to your portable or shared project and modify the \<ContentPage> tag to include the following references.

    ```xml
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Appl.QuickStart"
    xmlns:c1="clr-namespace:C1.Xamarin.Forms.Gauge;assembly=C1.Xamarin.Forms.Gauge">
    ```
2. Initialize a BulletGraph control by adding the markup for the control between the \<ContentPage>\</ContentPage>tags inside the \<StackLayout>\</StackLayout>tags.

    ```csharp
    <StackLayout>
     <c1:C1BulletGraph 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">
     </c1:C1BulletGraph>
    </StackLayout>
    ```

### Step 2: Run the Project

1. In the **Solution Explorer**, double click **App.cs** to open it.
2. 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](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartBulletGraph#step-1-add-a-bulletgraph-control).
<br>
        The following code shows the class constructor App`()` after completing steps above.

        ```csharp
        public App()
        {
            // The root page of your application
            MainPage = new ContentPage
            {
                Content = QuickStart.GetBulletGraph()
            };
        }
        ```
    * **To return a Content Page**: In the class constructor App( ), set the Content Page QuickStart as the MainPage.
<br>
        The following code shows the class constructor App( ), after completing this step.

        ```csharp
        public App()
        {
            // The root page of your application
            MainPage = new QuickStart();
        }
        ```


3. Some additional steps are required to run the iOS and UWP 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.

            ```csharp
            C1.Xamarin.Forms.Gauge.Platform.iOS.C1GaugeRenderer.Init();
            ```
    * **UWP App**:
        1. In the **Solution Explorer**, expand MainPage.xaml.
        2. Double click MainPage.xaml.cs to open it.
        3. Add the following code to the class constructor.

            ```csharp
            C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();
            ```
        4. (Optional) In case you compile your UWP application in **Release** mode, you need to explicitly add the following code to the **OnLaunched** method in your **App.xaml.cs** to include the correct assemblies with your application.

            ```csharp
            var assembliesToInclude = new List<Assembly>();
            assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer)
            .GetTypeInfo().Assembly);
            assembliesToInclude.Add(typeof(C1.UWP.Gauge.C1GaugeRenderer).GetTypeInfo().Assembly);
            Xamarin.Forms.Forms.Init(e, assembliesToInclude);
            ```
4. Press **F5** to run the project.

## See Also

[Gauge Types](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/gaugeTypes)