Set ToggleSwitch On an Off

Question

I have 3 toggle switches named onlineToggle, offlineToggle, and maxToggle.

XAML:

<ToggleSwitch
x:Name="onlineToggleSwitch"
VerticalAlignment="Center"
FlowDirection="LeftToRight"
OffContent=""
OnContent=""
    PointerReleased="onlineToggleSwitch_PointerReleased">
</ToggleSwitch>

<ToggleSwitch
x:Name="offlineToggleSwitch"
VerticalAlignment="Center"
FlowDirection="LeftToRight"
OffContent=""
OnContent=""
    PointerReleased="offlineToggleSwitch_PointerReleased">
</ToggleSwitch>

<ToggleSwitch
x:Name="maxToggleSwitch"
VerticalAlignment="Center"
FlowDirection="LeftToRight"
OffContent=""
OnContent=""
    PointerReleased="maxToggleSwitch_PointerReleased">
</ToggleSwitch>

I want if onlineToggle isOn = true, then offlineToggle and maxToggle is off. If offlineToggle isOn = true, then onlineToggle and maxToggle are off. And if maxToggle isOn = true, then onlineToggle and offlineToggle are off.

Code:

private void onlineToggleSwitch_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    onlineToggleSwitch.IsOn = true;
    offlineToggleSwitch.IsOn = false;
    maxToggleSwitch.IsOn = false;
}

private async void offlineToggleSwitch_PointerReleased(object sender, PointerRoutedEventArgs e)
{
        onlineToggleSwitch.IsOn = false;
        offlineToggleSwitch.IsOn = true;
        maxToggleSwitch.IsOn = false;
}

private void maxToggleSwitch_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    onlineToggleSwitch.IsOn = false;
    offlineToggleSwitch.IsOn = false;
    maxToggleSwitch.IsOn = true;
}

But I have a problem, namely if onlineToggle isOn = true, then I want to change maxToggle = true, then toogleswitches are all off (maxToggle won't be on) like the video below: https://1drv.ms/v/s!Av6G8Zq_Px8Whi9eSZTSDPqMUCdA?e=25cJtD

How to handle it?

Answer 1

According to your description, you should want to select at most one of the three ToggleSwitchs.

It is recommended to use the Toggled event instead of the PointerReleased event. Determine whether the current ToggleSwitch is IsOn in the event, and then close the other two ToggleSwitchs.

<ToggleSwitch
x:Name="onlineToggleSwitch"
VerticalAlignment="Center"
FlowDirection="LeftToRight"
OffContent=""
OnContent=""
  Toggled="onlineToggleSwitch_Toggled">
</ToggleSwitch>

<ToggleSwitch
x:Name="offlineToggleSwitch"
VerticalAlignment="Center"
FlowDirection="LeftToRight"
OffContent=""
OnContent=""
    Toggled="offlineToggleSwitch_Toggled">
</ToggleSwitch>

<ToggleSwitch
x:Name="maxToggleSwitch"
VerticalAlignment="Center"
FlowDirection="LeftToRight"
OffContent=""
OnContent=""
    Toggled="maxToggleSwitch_Toggled">
</ToggleSwitch>

---

private void onlineToggleSwitch_Toggled(object sender, RoutedEventArgs e)
 {
     
     if (onlineToggleSwitch.IsOn == true)
     {
         offlineToggleSwitch.IsOn = false;
         maxToggleSwitch.IsOn = false;
     }
 }

 private void offlineToggleSwitch_Toggled(object sender, RoutedEventArgs e)
 {
    
     if (offlineToggleSwitch.IsOn == true)
     {
         onlineToggleSwitch.IsOn = false;
         maxToggleSwitch.IsOn = false;
     }
     
 }

 private void maxToggleSwitch_Toggled(object sender, RoutedEventArgs e)
 {
     if (maxToggleSwitch.IsOn == true)
     {
         onlineToggleSwitch.IsOn = false;
         offlineToggleSwitch.IsOn = false;
     }
    
 }

Answer 2

To achieve the behavior you described, you can modify your event handlers to check the state of the toggle switches before changing their values. Here's how you can do it:

private void onlineToggleSwitch_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    if (!onlineToggleSwitch.IsOn)
    {
        onlineToggleSwitch.IsOn = true;
        offlineToggleSwitch.IsOn = false;
        maxToggleSwitch.IsOn = false;
    }
    else if (maxToggleSwitch.IsOn)
    {
        onlineToggleSwitch.IsOn = false;
        offlineToggleSwitch.IsOn = false;
        maxToggleSwitch.IsOn = false;
    }
}

private void offlineToggleSwitch_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    if (!offlineToggleSwitch.IsOn)
    {
        onlineToggleSwitch.IsOn = false;
        offlineToggleSwitch.IsOn = true;
        maxToggleSwitch.IsOn = false;
    }
    else if (maxToggleSwitch.IsOn)
    {
        onlineToggleSwitch.IsOn = false;
        offlineToggleSwitch.IsOn = false;
        maxToggleSwitch.IsOn = false;
    }
}

private void maxToggleSwitch_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    if (!maxToggleSwitch.IsOn)
    {
        onlineToggleSwitch.IsOn = false;
        offlineToggleSwitch.IsOn = false;
        maxToggleSwitch.IsOn = true;
    }
    else
    {
        onlineToggleSwitch.IsOn = false;
        offlineToggleSwitch.IsOn = false;
        maxToggleSwitch.IsOn = false;
    }
}

This modification will ensure that when you try to switch maxToggleSwitch on while onlineToggleSwitch is already on, all switches will be turned off. Similarly, it will handle the cases for other switches as well.

Answer 3

You're using the "wrong" controls for this scenario; RadioButtons are more appropriate when only one control in a "group" can be selected. ToggleSwitch is not a "group" item. With more than one option, then CheckBoxes are more appropriate.

In either case (RB or CB), you can then just deal with the Click / Checked event; instead of having to decipher what caused the "toggle" in this case.