Quick Start: Change State and Customize the Control

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

• 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 for detailed instructions).

2. Edit the <ContentPage> tag to include the following reference.

   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.

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

   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.

   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

   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.

        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.

        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.

        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.