ComponentOne Xamarin Edition
LinearGauge Quick Start
Controls > Gauge > Quick Start: Add and Configure > LinearGauge Quick Start

This section describes how to add a LinearGauge control 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# or Adding Xamarin Components using XAML.

This topic comprises of two steps:

The following image shows a LinearGauge with custom ranges.

Step 1: Add a LinearGauge 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 IsReadOnly property to false, then the user can edit the value by tapping on the gauge.

Note: The C1LinearGauge.Origin property can be used to change the origin of the LinearGauge pointer. By default, the Origin is set to 0.

Complete the following steps to initialize a LinearGauge control in C# or XAML.

In Code

  1. Add a new class (for example QuickStart.cs) to your portable or shared project and include the following references.
    C#
    Copy Code
    using Xamarin.Forms;
    using C1.Xamarin.Forms.Gauge;
  2. Instantiate a LinearGauge control in a new method GetLinearGauge( ).
    C#
    Copy Code
    public static C1LinearGauge GetLinearGauge()
    {
        // Instantiate LinearGauge and set its properties
        C1LinearGauge gauge = new C1LinearGauge();
        gauge.Value = 35;
        gauge.Thickness = 0.1;
        gauge.Min = 0;
        gauge.Max = 100;
        gauge.Direction = LinearGaugeDirection.Right;
        gauge.PointerColor = Xamarin.Forms.Color.Blue;
        gauge.ShowRanges = true;
    
        //Create Ranges
        GaugeRange low = new GaugeRange();
        GaugeRange med = new GaugeRange();
        GaugeRange high = new GaugeRange();
    
        //Customize Ranges
        low.Color = Xamarin.Forms.Color.Red;
        low.Min = 0;
        low.Max = 40;
        med.Color = Xamarin.Forms.Color.Yellow;
        med.Min = 40;
        med.Max = 80;
        high.Color = Xamarin.Forms.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;
    }

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 references 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:c1="clr-namespace:C1.Xamarin.Forms.Gauge;assembly=C1.Xamarin.Forms.Gauge"">
  2. Initialize a LinearGauge 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>
    <c1:C1LinearGauge Value="35" Min="0" Max="100" Thickness="0.1" 
    
           PointerColor="Blue" Direction="Right" ShowRanges="True">
                <c1:C1LinearGauge.Ranges>
                    <c1:GaugeRange Min="0" Max="40" Color="Red"/>
                    <c1:GaugeRange Min="40" Max="80" Color="Yellow"/>
                    <c1:GaugeRange Min="80" Max="100" Color="Green"/>
                </c1:C1LinearGauge.Ranges>
            </c1:C1LinearGauge>
      </StackLayout>
Back to Top

2: Run the Project

  1. In the Solution Explorer, double click App.cs to open it.
  2. Complete the following steps to display the LinearGauge 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 GetLinearGauge( ) defined in the previous procedure, Step 1: Add a LinearGauge 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.GetLinearGauge()
          };
      }
    • To return a Content Page: In the class constructor App( ), set the Content 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();
      }
  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.
        C#
        Copy Code
        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.
        C#
        Copy Code
        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.

        C#
        Copy Code
        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.
Back to Top
See Also