Xamarin.Forms | ComponentOne
Getting Started with Xamarin Edition / Adding Xamarin Components using C#
In This Topic
    Adding Xamarin Components using C#
    In This Topic

    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.
      C#
      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.

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

      C#
      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.
          C#
          Copy Code
          C1.Xamarin.Forms.Gauge.Platform.iOS.C1GaugeRenderer.Init();
          
      • 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.
          C#
          Copy Code
          C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();
          
    4. Press F5 to run the project.
    Back to Top
    See Also