Toggle Switch Control For Windows 10

Toggle Switch represents a switch that can be toggled between two states. We can use a Toggle Switch control to let the user switch an option between on and off states. We use the IsOn property to determine the state of the switch. Handle the Toggled event to respond to changes in the state.

Step 1: Open a blank app and add a ToggleSwitch control either from the toolbox or by copying the following XAML code into your grid.

<TextBlock Text="Toggle Switch" FontSize="20"></TextBlock>
<StackPanel Margin="10,40,0,0">
    <StackPanel Orientation="Horizontal">
        <ToggleSwitch Name="myToggleSwitch" Header="Toggle Switch" OffContent="OFF" OnContent="ON" Toggled="myToggleSwitch_Toggled" />
        <ProgressRing Name="myRing" Height="40" Width="40" /> </StackPanel>
</StackPanel>

Here we have added a ToggleSwitch and a ProgressRing. By toggling the switch we are controlling the IsActive property of the Progress Ring.

  

 

Step 2: Copy and paste the following code to the cs page to handle the events generated on Toggling:

private void myToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    if (myToggleSwitch.IsOn)
    {
        myRing.IsActive = true;
    }
    else
    {
        myRing.IsActive = false;
    }
}

Step 3: Run your application and test yourself.