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.

   XAML	Copy Code
   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.

   XAML	Copy Code
   <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.

   C#	Copy Code
   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.

   C#	Copy Code
   Toggle.Checked += Toggle_Checked;

Back to Top

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

   C#	Copy 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.

        C#	Copy Code
        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.

        C#	Copy Code
        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.

        C#	Copy Code
        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.

Back to Top