# Adding Xamarin Components using XAML

## Content

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](/componentone/docs/xamarin/online-forms/overview/AddComponentsusingXAML#strongstep-1-add-a-new-content-pagestrong)
* [Step 2: Add the Control](/componentone/docs/xamarin/online-forms/overview/AddComponentsusingXAML#strongstep-2-add-the-controlstrong)
* [Step 3: Run the Program](/componentone/docs/xamarin/online-forms/overview/AddComponentsusingXAML#strongstep-3-run-the-programstrong)

## **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:

    ```xml
    <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.
<br>
    The following code shows how to initialize a Gauge control.

    ```xml
    <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.
<br>
    The following code shows the class constructor `App()`, after completing this step.

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

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

            ```csharp
            C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();
            ```
4. Press **F5** to run the project.

## See Also

[Adding Xamarin Components using C#](/componentone/docs/xamarin/online-forms/overview/AddingComponentstoanApp)