# Quick Start: Change State and Customize the Control

## Content

This section describes adding the C1ToggleButton control to your portable or shared application and changing color of the control on the basis of change in state of the control.

Complete the following steps to change color of the control on changing its state.

* [Step 1: Create an event to change the state of the control](/componentone/docs/xamarin/online-forms/controls/input/ToggleButton/togglebuttonquickstart#step-1-create-an-event-to-change-the-state-of-the-control)
* [Step 2: Run the Project](/componentone/docs/xamarin/online-forms/controls/input/ToggleButton/togglebuttonquickstart#step-2-run-the-project)

The following image shows the change in color of the control on changing its state.

### Step 1: Create an event to change the state of the control

1. Create a new portable or shared Xamarin.Forms application (Refer [Creating a New Xamarin.Forms App](/componentone/docs/xamarin/online-forms/overview/CreatingaNewProject) for detailed instructions).
2. Edit the \<ContentPage> tag to include the following reference.

    ```xml
    xmlns:c1tog="clr-namespace:C1.Xamarin.Forms.Core;assembly=C1.Xamarin.Forms.Core"
    ```
3. Initialize the C1ToggleButton control and set some of its basic properties such as Name, BackgroundColor, etc. by adding the given markup inside the \<ContentPage>\</ContentPage> tags.

    ```xml
    <c1tog:C1ToggleButton x:Name="Toggle" BackgroundColor="Green"
    HeightRequest="50" WidthRequest="100" HorizontalOptions="Center"
    VerticalOptions="Center" CheckedText="Checked" UncheckedText="Unchecked"/>
    ```
4. Expand the MainPage.xaml node in the Solution Explorer to open MainPage.xaml.cs and add the following code to the MainPage class to create an event handler method for changing color of the control on the basis of change in its state.

    ```csharp
    private void Toggle_Checked(object sender, EventArgs e)
    {
        if(Toggle.IsChecked == true)
        {
            Toggle.BackgroundColor = Color.Green;
        }
        else if(Toggle.IsChecked == false)
        {
            Toggle.BackgroundColor = Color.Red;
        }
    }
    ```
5. Subscribe to the Toggle\_Checked event in the constructor using the given code.

    ```csharp
    Toggle.Checked += Toggle_Checked;
    ```

### Step 2: Run the Project

1. In the Solution Explorer, double-click **App.cs** file to open it.
2. To return a Content Page, add the following code in the constructor App() as illustrated in the given code

    ```csharp
    public App()
       {
           // The root page of your application
           MainPage = new MainPage();
       }
    ```
3. Some additional steps are required to run iOS and UWP apps:
    * **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.Core.Platform.iOS.C1CoreRenderer.Init();
            ```
    * **UWP App**:
        1. In the Solution Explorer, expand the MainPage.xaml inside YouAppName.UWP project.
        2. Double click the MainPage.xaml.cs to open it and add the following code to the class constructor.

            ```csharp
            C1.Xamarin.Forms.Core.Platform.UWP.C1CoreRenderer.Init();
            ```
        3. (Optional) In case you compile your UWP application in **Release** mode, you need to explicitly add the following code to the **OnLaunched** method in your **App.xaml.cs** to include the correct assemblies with your application.

            ```csharp
            var assembliesToInclude = new List<Assembly>();assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Core.Platform.UWP.C1CoreRenderer).GetTypeInfo().Assembly);Xamarin.Forms.Forms.Init(e, assembliesToInclude);
            ```
4. Press **F5** to run the project.