Using the ToggleSwitch

Like the ToggleButton, ToggleSwitch uses a nullable Boolean value to represent its state. In its On position, its IsChecked property is true. In the Off position, IsChecked is false. If the IsChecked property is null, the ToggleSwitch is displayed using its Off position.

You can use the ToggleSwitch by either binding its IsChecked property to a property in your viewmodel, or by responding to its Checked and Unchecked events in your code-beside. The later approach involves subscribing to the ToggleSwitch.Checked and Unchecked events, as shown:

Click here to view code image

<toolkit:ToggleSwitch
        Header="ToggleSwitch"
        IsChecked="true"
        Checked="ToggleSwitch_Checked"
        Unchecked="ToggleSwitch_Unchecked"/>

Both the Checked and Unchecked events are RoutedEvents. The following excerpt shows what event handlers for these events might look like:

Click here to view code image

void ToggleSwitch_Checked(object sender, RoutedEventArgs e)
{
    ToggleSwitch toggleSwitch = (ToggleSwitch)sender;
    bool? isChecked = toggleSwitch.IsChecked;
    /* Do something with value. */
    MessageBox.Show("Checked!");
}

void ToggleSwitch_Unchecked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Unchecked!");
}

ToggleSwitch allows customization of its header using its Header and HeaderTemplate properties. For more information on creating a custom header for the control, see the previous section “Adding a Control Header.”

The viewmodel contains a ToggleOn property, as shown:

bool? toggleOn;

public bool? ToggleOn
{
    get
    {
        return toggleOn;
    }
    set
    {
        Assign(ref toggleOn, value);
    }
}

Consuming this property in the view is a ToggleSwitch, whose IsChecked property has a two-way data binding to the ToggleOn property of the viewmodel:

Click here to view code image

<toolkit:ToggleSwitch
    Header="ToggleSwitch"
    IsChecked="{Binding ToggleOn, Mode=TwoWay}" />

Thus, when the user taps the ToggleSwitch, the ToggleOn property of the viewmodel is inverted.