# RadialGauge Quick Start ## Content This section describes how to add a [RadialGauge](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1RadialGauge.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 RadialGauge control](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartRadialGauge#step-1-add-a-radialgauge-control) * [Step 2: Run the Project](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartRadialGauge#step-2-run-the-project) The following image shows how the RadialGauge appears, after completing the steps above: ![](https://cdn.mescius.io/document-site-files/images/fb6b46a2-eac0-487c-84c3-5e1b4c7b1348/images/radialgaugeqs.png) ### Step 1: Add a RadialGauge 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. The [StartAngle](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1RadialGauge.StartAngle.html) property specifies the RadialGauge's starting angle and the [SweepAngle](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1RadialGauge.SweepAngle.html) property specifies an angle representing the length of the RadialGauge's arc. These properties can be used to specify the start and end points of the radial gauge arc. The angle for both properties are measured clockwise, starting at the 9 o'clock position. When the SweepAngle is negative, the gauge is formed in counter clockwise direction. The control also provides the [AutoScale](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Gauge/C1.Xamarin.Forms.Gauge.C1RadialGauge.AutoScale.html) property. When this property is set to **true**, the RadialGauge is automatically scaled to fill its containing element. > type=note > **Note**: The [C1RadialGauge.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 RadialGauge pointer. By default, the Origin is set to 0. Complete the following steps to initialize a RadialGauge 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 RadialGauge control in a new method GetRadialGauge(). ```csharp public static C1RadialGauge GetRadialGauge() { //Instantiate RadialGauge and set its properties C1RadialGauge gauge = new C1RadialGauge(); gauge.Value = 35; gauge.Min = 0; gauge.Max = 100; gauge.StartAngle = -20; gauge.SweepAngle = 220; gauge.AutoScale = true; gauge.ShowText = GaugeShowText.None; 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 RadialGauge 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 the following references: ```xml ``` 2. Initialize a RadialGauge control by adding the markup for the control between the \\tags and inside the \\tags as shown below: ```csharp ``` ### 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 RadialGauge 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 GetRadialGauge( ) defined in the previous procedure, [Step 1: Add a RadialGauge Control](/componentone/docs/xamarin/online-forms/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartRadialGauge#step-1-add-a-radialgauge-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.GetRadialGauge() }; } ``` * **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)