# LinearGauge Quick Start ## Content This section describes how to add a [LinearGauge](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1LinearGauge.html) 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#](/componentone/docs/xamarin/online-forms/overview/AddingComponentstoanApp) or [Adding Xamarin Components using XAML](/componentone/docs/xamarin/online-forms/overview/AddComponentsusingXAML). This topic comprises of two steps: * [Step 1: Add a LinearGauge control](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStart#step-1-add-a-lineargauge-control) * [Step 2: Run the Project](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStart#2-run-the-project) The following image shows a LinearGauge with custom ranges. ![](https://cdn.mescius.io/document-site-files/images/fb6b46a2-eac0-487c-84c3-5e1b4c7b1348/images/lineargaugeqs.png) ### Step 1: Add a LinearGauge control The [Value](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1Gauge.Value.html) 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 [C1LinearGauge.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 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. ```csharp using Xamarin.Forms; using C1.Xamarin.Forms.Gauge; ``` 2. Instantiate a LinearGauge control in a new method GetLinearGauge( ). ```csharp 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 \tag to include references as shown below: ```xml ``` 2. Initialize a LinearGauge control by adding the markup for the control between the \\tags and inside the \\ tags, as shown below: ```xml ``` ### 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](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStart#step-1-add-a-lineargauge-control).
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.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. ```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(); 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)