Collapse All Expand All

This section describes how to add a XuniRadialGauge 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 two steps:

• Step 1: Add a RadialGauge control
• Step 2: Run the Project

The following image shows how the RadialGauge appears, after completing the steps above:

Step 1: Add a RadialGauge 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.

The StartAngle property specifies the RadialGauge's starting angle and the SweepAngle 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 is formed counter clockwise.

RadialGauge also offers an AutoScale property. When this property is set to true, the RadialGauge is automatically scaled to fill its containing element.

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 Xuni Gauge and Xamarin references as shown below.

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

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

   C#

   Copy Code

   public static XuniRadialGauge GetRadialGauge() { //Instantiate RadialGauge and set its properties XuniRadialGauge gauge = new XuniRadialGauge(); gauge.Value = 35; gauge.Min = 0; gauge.Max = 100; gauge.StartAngle = -20; gauge.SweepAngle = 220; gauge.AutoScale = true; gauge.ShowText = GaugeShowText.None; gauge.PointerColor = Color.Blue; //Create Ranges GaugeRange low = new GaugeRange(); GaugeRange med = new GaugeRange(); GaugeRange high = new GaugeRange(); //Customize Ranges low.Color = Color.Red; low.Min = 0; low.Max = 40; med.Color = Color.Yellow; med.Min = 40; med.Max = 80; high.Color = 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 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.Forms.Gauge;assembly=Xuni.Forms.Gauge">

2. Initialize a RadialGauge 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:XuniRadialGauge Value="35" Min="0" Max="100" HeightRequest="100" WidthRequest="50" ShowText="None" StartAngle = "-20" SweepAngle = "220" AutoScale = "true" PointerColor="Blue"> <xuni:XuniRadialGauge.Ranges> <xuni:GaugeRange Min="0" Max="40" Color="Red"/> <xuni:GaugeRange Min="40" Max="80" Color="Yellow"/> <xuni:GaugeRange Min="80" Max="100" Color="Green"/> </xuni:XuniRadialGauge.Ranges> </xuni:XuniRadialGauge> </StackLayout>

Back to Top

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.

     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.GetRadialGauge() }; }

   • 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(); }

3. 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.Forms.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.Forms.Gauge.Platform.WinPhone.GaugeRenderer.Init();

4. Press F5 to run the project.

Back to Top

 

 

---

Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback