Adding Xuni Components using C#

This topic demonstrates how to add a Xuni control to your app using C#. This is done in three steps:

Step 1: Add a new Class
Step 2: Add the Control
Step 3: Run the Program

Step 1: Add a new Class

In the Solution Explorer, right click the project YourAppName (Portable or Shared).
Select Add | New. The Add New Item dialog appears.
Under installed templates, select C# | Class.
Add a name for the class (for example Class1.cs) and click OK. A new class is added to your project.

Step 2: Add the Control

In the Solution Explorer, double click Class1.cs to open it.
Include the necessary namespaces. For example, the following code includes the namespace for Gauge.
C#
Copy Code
using Xuni.Xamarin.Gauge; using Xamarin.Forms;
Declare a new method (for example ReturnMyControl()) with the control you want to add set as its return type.

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

In the method definition create an instance of the control and set its properties.

The following example shows how to create an instance of the LinearGauge control and initialize it in the ReturnMyControl() method definition.

C#	Copy Code
public static XuniLinearGauge ReturnMyControl() { // Instantiate LinearGauge and set its properties XuniLinearGauge gauge = new XuniLinearGauge(); gauge.HeightRequest = 50; gauge.WidthRequest = 50; gauge.Value = 35; gauge.Thickness = 0.1; gauge.Min = 0; gauge.Max = 100; gauge.Direction = LinearGaugeDirection.Right; //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 Gauge gauge.Ranges.Add(low); gauge.Ranges.Add(med); gauge.Ranges.Add(high); return gauge; }

Copy Code

public static XuniLinearGauge ReturnMyControl()
{
    // Instantiate LinearGauge and set its properties
    XuniLinearGauge gauge = new XuniLinearGauge();
    gauge.HeightRequest = 50;
    gauge.WidthRequest = 50;
    gauge.Value = 35;
    gauge.Thickness = 0.1;
    gauge.Min = 0;
    gauge.Max = 100;
    gauge.Direction = LinearGaugeDirection.Right;

    //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 Gauge
    gauge.Ranges.Add(low);
    gauge.Ranges.Add(med);
    gauge.Ranges.Add(high);

    return gauge;
}

Step 3: Run the Program

In the Solution Explorer, double click App.cs to open it.
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 ReturnMyControl() defined in the previous procedure, Step 2: Add a 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 = Class1.ReturnMyControl() }; }
Few additional steps are required to run the iOS and WinPhone projects. For example, the following steps need to be performed in case of Gauges:
- iOS Project:
  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.Xamarin.Gauge.Platform.iOS.Forms.Init();
- WinPhone Project:
  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.Xamarin.Gauge.Platform.WinPhone.GaugeRenderer.Init();
Press F5 to run the project.