toggleswitch.md

-api-id	-api-type
T:Windows.UI.Xaml.Controls.ToggleSwitch	winrt class

Windows.UI.Xaml.Controls.ToggleSwitch

-description

Represents a switch that can be toggled between two states.

-xaml-syntax

<ToggleSwitch .../>
-or-
<ToggleSwitch ...>
  oneOrMorePropertyElementComponents
</ToggleSwitch>

-remarks

Tip

For more info, design guidance, and code examples, see Toggle switches.

ToggleSwitch is a control that can be toggled between 2 states.

Use a ToggleSwitch control to let the user switch an option between on and off states. Use the IsOn property to determine the state of the switch. Handle the Toggled event to respond to changes in the state.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available locally with the SDK or NuGet package installation.

• WinUI Styles (recommended): For updated styles from WinUI, see \Users\<username>\.nuget\packages\microsoft.ui.xaml\<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml.
• Non-WinUI styles: For built-in styles, see %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic\generic.xaml.

Locations might be different if you customized the installation. Styles and resources from different versions of the SDK might have different values.

XAML also includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. Modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the XAML styles article. Light-weight styling resources are available starting in Windows 10, version 1607 (SDK 14393).

-examples

Tip

For more info, design guidance, and code examples, see Toggle switch.

[!div class="nextstepaction"] Open the WinUI 2 Gallery app and see the ToggleSwitch in action

The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

This example shows how to set the Header, OnContent, and OffContent properties of a toggle switch. The Toggled event is handled to turn a ProgressRing control on or off.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch Header="Toggle Switch Example" 
        OffContent="Do work" OnContent="Working" 
        Toggled="ToggleSwitch_Toggled"/>  
    <ProgressRing x:Name="progress1"/>
</StackPanel>

        private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            ToggleSwitch toggleSwitch = sender as ToggleSwitch;
            if (toggleSwitch != null)
            {
                if (toggleSwitch.IsOn == true)
                {
                    progress1.IsActive = true;
                    progress1.Visibility = Visibility.Visible;
                }
                else
                {
                    progress1.IsActive = false;
                    progress1.Visibility = Visibility.Collapsed;
                }
            }
        }

using namespace winrt::Windows::UI::Xaml::Controls;
void MainPage::ToggleSwitch_Toggled(IInspectable const& sender, RoutedEventArgs const& /* args */)
{
    ToggleSwitch toggleSwitch = sender.as<ToggleSwitch>();
    if (toggleSwitch)
    {
        if (toggleSwitch.IsOn())
        {
            progress1().IsActive(true);
            progress1().Visibility(Visibility::Visible);
        }
        else
        {
            progress1().IsActive(false);
            progress1().Visibility(Visibility::Collapsed);
        }
    }
}

-see-also

Toggle switches overview, CheckBox, RadioButton, Controls list, Controls by function