Switch Control In Xamarin.Forms Application For Android And UWP

Switch control is a View control, which provides a toggled value.

Before reading this article, please go through the article How To Create And Use XAML Content Page In Xamarin.Forms Application For Android And Universal Windows Platform.

After reading this article, you will know how to add Switch control in Xamarin.Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The important tools are given below, which are required to develop UWP.

Windows 10 (Recommended).
Visual Studio 2015 Community Edition (It is a free software available online).
Using Visual Studio 2015 Installer, Enable the Xamarin (cross platform mobile development and C#/.NET, while installing/modifying Visual Studio 2015.

Now, we can discuss step-by-step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give the suitable name for your app (XamFormSwitch) ->OK.

XAML

Step 2

Now, create project “XamFormSwitch_Droid”. Choose the Target and minimum platform version for your Universal Windows Project.

XAML

Create project “XamFormSwitch_UWP”.

XAML

Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update the Xamarin.Forms Reference for Portable Project and XamFormSwitch_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin.Forms Application For Android And Universal Windows Platform).

Step 4

Add XAML page for Switch Control demo. Right click XamFormSwitch (Portable) project. Select ADD-> NewItem.

XAML

Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.

XAML

Step 5

Add Switch tag and labels in SwitchDemo.Xaml.

<StackLayout Orientation="Vertical">
<Label/>
<Label Text="Switch Control in Xamarin.Forms Application - UWP and Android Demo" FontSize="20" />
<Label/>
<Label/>
<Label/>
<Label xName="lbldisp"></Label>
<Switch HorizontalOptions="LayoutOptions.Center" VerticalOptions="LayoutOptions.CenterAndExpand" Toggled="SwitchToggled" /> </StackLayout>

Step 6

Add the code, mentioned below in SwitchDemo.Xaml.cs.

void SwitchToggled(object sender, ToggledEventArgs e) {
lbldisp.Text = "Switch Status is " + e.Value.ToString();
}

Step 7

Open (double click) the file App.cs in the Solution Explorer-> XamFormSwitch (portable) and set the Root page.

XAML

Step 8

We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamFormSwitch.Droid and XamFormSwitch.UWP (Universal Windows).

XAML

Step 9

Change the Configuration Manager settings. Go to Build -> Configuration Manager, uncheck all the build and deploy options to the iOS, Windows, WinPhone. Check the Droid and UWP.

XAML

Step 10

Deploy your app in a Local Machine and the output of XamFormSwitch app is given below.

XAML

After Toggling, the On Switch is shown below.

XAML

After Toggling, the Off Switch is shown below.

XAML

Summary

Now, you have successfully created and tested Switch control in Xamarin.Forms Application for cross platform application development, using Visual C# and Xamarin.