Adding Xamarin Components using XAML

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:

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

   <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>

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.

   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.

        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.

        C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();

4. Press F5 to run the project.

See Also

Adding Xamarin Components using C#