Switch Cell In Xamarin.Forms Application For Android And UWP

Switch Cell contains a label and an on/off switch. Reading this article, you can learn how to use Switch Cells with Table View in Xamarin.Forms application for Android and Universal Windows Platform in cross platform application development.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a Free trial software available online)
3. Using Visual Studio 2017 Installer, enable the feature of mobile development with .NET.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2017 RC and go to Start -> New Project-> select Cross-Platform (under Visual C#->Cross Platform App-> Give suitable name for your app (as - XamFormSwitchCell) ->OK.

 

Step 2

Select the Cross Platform template as Blank APP ->Set UI Technology as Forms and Sharing as PCL. Afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS, UWP) and displays Getting Started.XamarinPage.

 

Step 3

In MainPage.Xaml page, add Label and SwitchCells in TableView.

 

<StackLayout>
    <Label Text="Xamarin Form Switch Cell Demo in Android and UWP " VerticalOptions="Center" HorizontalOptions="Center" />
    <TableView Intent="Form" x:Name="SwiCellDemo" RowHeight="50">
        <TableRoot>
            <TableSection Title="Voice Mail">
                <SwitchCell Text="New Voice Mail" /> </TableSection>
            <TableSection Title="Mail">
                <SwitchCell Text="New Mail" On="True" /> </TableSection>
            <TableSection Title="Data">
                <SwitchCell x:Name="SWCData" Text="Select Your Network" On="{Binding NetEn,Mode=TwoWay}" OnChanged="SWCData_OnOnChanged" /> </TableSection>
        </TableRoot>
    </TableView>
    <Picker x:Name="PicNetwork" HorizontalOptions="Fill" /> </StackLayout>

 

 

Step 4

Add the following code in MainPage.Xaml.cs.

 

public SwMobileBind TabSec;
TabSec = new SwMobileBind {
    NetEn = true
};
SwiCellDemo.BindingContext = TabSec;
private void SWCData_OnOnChanged(object sender, ToggledEventArgs e) {
    SelectNw(TabSec.NetEn);
}
private void SelectNw(bool snw) {
    PicNetwork.Items.Clear();
    if (snw) {
        PicNetwork.Title = "Mobile Data";
        PicNetwork.Items.Add("2G");
        PicNetwork.Items.Add("3G");
        PicNetwork.Items.Add("4G");
    } else {
        PicNetwork.Title = "WiFI";
        PicNetwork.Items.Add("Jio WiFi");
        PicNetwork.Items.Add("VVnetwotrk");
        PicNetwork.Items.Add("CrNet");
    }
    PicNetwork.SelectedIndex = 0;
}
}
public class SwMobileBind: INotifyPropertyChanged {
    private bool _NetEn;
    public bool NetEn {
        get {
            return _NetEn;
        }
        set {
            _NetEn = value;
            OnPropertyChanged();
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propName = null) {
        PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propName));
    }
}

 

Step 5

We will test Android and UWP. So, we can set the multiple startup projects as XamFormSwitchCell.Droid and XamFormSwitchCell.UWP (Universal Windows).

 

Step 6

Change the Configuration Manager settings. Go to Build -> Configuration Manager and uncheck the "Build" and "Deploy" options for iOS and check the options for Droid and UWP.

 

 

Step 7

Deploy your app on Android Emulator and Local Machine (UWP). The output of the XamFormSwitchCell app is shown below.

After clicking the Picker Control when Switch is ON status.

 

Now, the Switch is in Off State.

 

After clicking the Picker Control when Switch is in OFF status.

 

Summary

Now, you have successfully tested Switch Cells in Xamarin Forms application for Cross Platform Application Development using Visual C# and Xamarin.