ComponentOne Xamarin.Forms Documentation
Getting Started with Xamarin Edition / Adding Xamarin Components using XAML
In This Topic
    Adding Xamarin Components using XAML
    In This Topic

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

    Step 1: Add a new Content Page

    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 C# | Content Page.
    4. Add a name for the XAML page (for example Page1.xaml) and click OK. A new XAML page is added to your project.

    Step 2: Add the Control

    1. In the Solution Explorer, double click Page1.xaml to open it.
    2. Modify the <ContentPage> tag to include the following references:
      XAML
      Copy Code
      <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      x:Class="YourAppName.Page1"
      xmlns:c1="clr-namespace:C1.Xamarin.Forms.Gauge;assembly=C1.Xamarin.Forms.Gauge">
      </ContentPage>
      
    3. Initialize the control in between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags.

      The following code shows how to initialize a Gauge control.

      XAML
      Copy Code
      <StackLayout>
        <c1:C1LinearGauge  Value="35" Min="0" Max="100" Thickness="0.1"
         HeightRequest="50" WidthRequest="50" PointerColor="Blue" Direction="Right">
          <c1:C1LinearGauge.Ranges>
            <c1:GaugeRange Min="0" Max="40" Color="Red"/>
            <c1:GaugeRange Min="40" Max="80" Color="Yellow"/>
            <c1:GaugeRange Min="80" Max="100" Color="Green"/>
          </c1:C1LinearGauge.Ranges>
        </c1:C1LinearGauge>
      </StackLayout>
      

    Back to Top

    Step 3: Run the Program

    1. In the Solution Explorer, double click App.cs to open it.
    2. In the class constructor App(), set Page1 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 Page1();
      }
      
    3. Few additional steps may be required for some controls. For example, the following steps need to be performed in case of Gauge to run an iOS app and a UWP app:
      • 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
          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.
          C#
          Copy Code
          C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();
          
    4. Press F5 to run the project.
    Back to Top

    See Also