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
• Step 2: Add the Control
• Step 3: Run the Program

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.