ComponentOne Xamarin Edition
Adding Xamarin Components using C#
Getting Started with Xamarin Edition > Adding Xamarin Components using C#

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

Step 1: Add a new Class

  1. In the Solution Explorer, right click the project YourAppName (Portable or Shared).
  2. Select Add | New Item.... The Add New Item dialog appears.
  3. Under installed templates, select Visual C# | Class.
  4. 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

  1. In the Solution Explorer, double click Class1.cs to open it.
  2. Include the necessary namespaces. For example, the following code includes the namespace for Gauge.
    Copy Code
    using C1.Xamarin.Forms.Gauge;
    using Xamarin.Forms;
  3. Declare a new method (for example ReturnMyControl( )) with the control you want to add set as its return type.
  4. 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.

    Copy Code
    public static C1LinearGauge ReturnMyControl()
        // Instantiate LinearGauge and set its properties
        C1LinearGauge gauge = new C1LinearGauge();
        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
        return gauge;
Back to Top

Step 3: Run the Program

  1. In the Solution Explorer, double click App.xaml.cs to open it.
  2. 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.

    Copy Code
    public App()
        // The root page of your application
        MainPage = new ContentPage
            Content = Class1.ReturnMyControl()
  3. Few additional steps are required to run the iOS and UWP 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.
        Copy Code
    • UWP Project:
      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.
        Copy Code
  4. Press F5 to run the project.
Back to Top
See Also