ToggleSwitch
ToggleSwitch
ToggleSwitch
ToggleSwitch
Class
Definition
Represents a switch that can be toggled between two states.
public : sealed class ToggleSwitch : Control, IToggleSwitch, IToggleSwitchOverridespublic sealed class ToggleSwitch : Control, IToggleSwitch, IToggleSwitchOverridesPublic NotInheritable Class ToggleSwitch Inherits Control Implements IToggleSwitch, IToggleSwitchOverrides// This API is not available in Javascript.
<ToggleSwitch .../>
-or-
<ToggleSwitch ...>
oneOrMorePropertyElementComponents
</ToggleSwitch>
- Inheritance
-
ToggleSwitchToggleSwitchToggleSwitchToggleSwitch
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
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;
}
}
}
Remarks
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 in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.
Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.
This table shows the resources used by the ToggleSwitch control.
| Resource key | Description |
|---|---|
| ToggleSwitchContainerBackground | Background color of entire control bounds at rest |
| ToggleSwitchContainerBackgroundPointerOver | Background color on hover |
| ToggleSwitchContainerBackgroundPressed | Background color when pressed |
| ToggleSwitchContainerBackgroundDisabled | Background color when disabled |
| ToggleSwitchContentForeground | Label text color at rest |
| ToggleSwitchContentForegroundDisabled | Label text color when disabled |
| ToggleSwitchHeaderForeground | Header text color at rest |
| ToggleSwitchHeaderForegroundDisabled | Header text color when disabled |
| ToggleSwitchFillOff | Background color of switch control part in "Off" state |
| ToggleSwitchFillOffPointerOver | Background olor of switch control part in "Off" state on hover |
| ToggleSwitchFillOffPressed | Background color of switch control part in "Off" state when pressed |
| ToggleSwitchFillOffDisabled | Background color of switch control part in "Off" state when disabled |
| ToggleSwitchFillOn | Background color of switch control part in "On" state |
| ToggleSwitchFillOnPointerOver | Background color of switch control part in "On" state on hover |
| ToggleSwitchFillOnPressed | Background color of switch control part in "On" state when pressed |
| ToggleSwitchFillOnDisabled | Background color of switch control part in "On" state when disabled |
| ToggleSwitchStrokeOff | Border color of switch control part in "Off" state |
| ToggleSwitchStrokeOffPointerOver | Border color of switch control part in "Off" state on hover |
| ToggleSwitchStrokeOffPressed | Border color of switch control part in "Off" state when pressed |
| ToggleSwitchStrokeOffDisabled | Border color of switch control part in "Off" state when disabled |
| ToggleSwitchStrokeOn | Border color of switch control part in "On" state |
| ToggleSwitchStrokeOnPointerOver | Border color of switch control part in "On" state on hover |
| ToggleSwitchStrokeOnPressed | Border color of switch control part in "On" state when pressed |
| ToggleSwitchStrokeOnDisabled | Border color of switch control part in "On" state when disabled |
| ToggleSwitchKnobFillOff | Color of switch control's knob in "Off" state |
| ToggleSwitchKnobFillOffPointerOver | Color of switch control's knob in "Off" state on hover |
| ToggleSwitchKnobFillOffPressed | Color of switch control's knob in "Off" state when pressed |
| ToggleSwitchKnobFillOffDisabled | Color of switch control's knob in "Off" state when disabled |
| ToggleSwitchKnobFillOn | Color of switch control's knob in "On" state |
| ToggleSwitchKnobFillOnPointerOver | Color of switch control's knob in "On" state on hover |
| ToggleSwitchKnobFillOnPressed | Color of switch control's knob in "On" state when pressed |
| ToggleSwitchKnobFillOnDisabled | Color of switch control's knob in "On" state when disabled |
Constructors
Properties
Header Header Header Header
Gets or sets the header content.
public : PlatForm::Object Header { get; set; }public object Header { get; set; }Public ReadWrite Property Header As object// This API is not available in Javascript.
<ToggleSwitch Header="textContent" />
- Value
- PlatForm::Object object object object
The header content for the ToggleSwitch.
HeaderProperty HeaderProperty HeaderProperty HeaderProperty
Identifies the Header dependency property.
public : static DependencyProperty HeaderProperty { get; }public static DependencyProperty HeaderProperty { get; }Public Static ReadOnly Property HeaderProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Header dependency property.
HeaderTemplate HeaderTemplate HeaderTemplate HeaderTemplate
Gets or sets the DataTemplate used to display the control's header.
public : DataTemplate HeaderTemplate { get; set; }public DataTemplate HeaderTemplate { get; set; }Public ReadWrite Property HeaderTemplate As DataTemplate// This API is not available in Javascript.
<ToggleSwitch>
<ToggleSwitch.HeaderTemplate>
singleDataTemplate
</ToggleSwitch.HeaderTemplate>
</ToggleSwitch>
The DataTemplate used to display the control's header.
HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty
Identifies the HeaderTemplate dependency property.
public : static DependencyProperty HeaderTemplateProperty { get; }public static DependencyProperty HeaderTemplateProperty { get; }Public Static ReadOnly Property HeaderTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the HeaderTemplate dependency property.
IsOn IsOn IsOn IsOn
Gets or sets a value that declares whether the state of the ToggleSwitch is "On".
public : PlatForm::Boolean IsOn { get; set; }public bool IsOn { get; set; }Public ReadWrite Property IsOn As bool// This API is not available in Javascript.
<ToggleSwitch IsOn="bool" />
- Value
- PlatForm::Boolean bool bool bool
true if the state is "On"; false if the state is "Off".
Remarks
"On" state uses the template from OnContentTemplate. "Off" state uses the template from OffContentTemplate.
IsOnProperty IsOnProperty IsOnProperty IsOnProperty
Identifies the IsOn dependency property.
public : static DependencyProperty IsOnProperty { get; }public static DependencyProperty IsOnProperty { get; }Public Static ReadOnly Property IsOnProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsOn dependency property.
OffContent OffContent OffContent OffContent
Provides the object content that should be displayed using the OffContentTemplate when this ToggleSwitch has state of "Off".
public : PlatForm::Object OffContent { get; set; }public object OffContent { get; set; }Public ReadWrite Property OffContent As object// This API is not available in Javascript.
<ToggleSwitch OffContent="stringContent"/>
- Value
- PlatForm::Object object object object
The object content. In some cases this is a string, in other cases it is a single element that provides a root for further composition content. Probably the most common "set" usage is to place a binding here.
OffContentProperty OffContentProperty OffContentProperty OffContentProperty
Identifies the OffContent dependency property.
public : static DependencyProperty OffContentProperty { get; }public static DependencyProperty OffContentProperty { get; }Public Static ReadOnly Property OffContentProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the OffContent dependency property.
OffContentTemplate OffContentTemplate OffContentTemplate OffContentTemplate
Gets or sets the DataTemplate used to display the control's content while in "Off" state.
public : DataTemplate OffContentTemplate { get; set; }public DataTemplate OffContentTemplate { get; set; }Public ReadWrite Property OffContentTemplate As DataTemplate// This API is not available in Javascript.
<ToggleSwitch>
<ToggleSwitch.OffContentTemplate>
singleDataTemplate
</ToggleSwitch.OffContentTemplate>
</ToggleSwitch>
The DataTemplate that displays the control's content while in "Off" state.
OffContentTemplateProperty OffContentTemplateProperty OffContentTemplateProperty OffContentTemplateProperty
Identifies the OffContentTemplate dependency property.
public : static DependencyProperty OffContentTemplateProperty { get; }public static DependencyProperty OffContentTemplateProperty { get; }Public Static ReadOnly Property OffContentTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the OffContentTemplate dependency property.
OnContent OnContent OnContent OnContent
Provides the object content that should be displayed using the OnContentTemplate when this ToggleSwitch has state of "On".
public : PlatForm::Object OnContent { get; set; }public object OnContent { get; set; }Public ReadWrite Property OnContent As object// This API is not available in Javascript.
<ToggleSwitch OnContent="stringContent"/>
- Value
- PlatForm::Object object object object
The object content. In some cases this is a string, in other cases it is a single element that provides a root for further composition content. Probably the most common "set" usage is to place a binding here.
OnContentProperty OnContentProperty OnContentProperty OnContentProperty
Identifies the OnContent dependency property.
public : static DependencyProperty OnContentProperty { get; }public static DependencyProperty OnContentProperty { get; }Public Static ReadOnly Property OnContentProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the OnContent dependency property.
OnContentTemplate OnContentTemplate OnContentTemplate OnContentTemplate
Gets or sets the DataTemplate used to display the control's content while in "On" state.
public : DataTemplate OnContentTemplate { get; set; }public DataTemplate OnContentTemplate { get; set; }Public ReadWrite Property OnContentTemplate As DataTemplate// This API is not available in Javascript.
<ToggleSwitch>
<ToggleSwitch.OnContentTemplate>
singleDataTemplate
</ToggleSwitch.OnContentTemplate>
</ToggleSwitch>
The DataTemplate that displays the control's content while in "On" state.
OnContentTemplateProperty OnContentTemplateProperty OnContentTemplateProperty OnContentTemplateProperty
Identifies the OnContentTemplate dependency property.
public : static DependencyProperty OnContentTemplateProperty { get; }public static DependencyProperty OnContentTemplateProperty { get; }Public Static ReadOnly Property OnContentTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the OnContentTemplate dependency property.
TemplateSettings TemplateSettings TemplateSettings TemplateSettings
Gets an object that provides calculated values that can be referenced as TemplateBinding sources when defining templates for a ToggleSwitch control.
public : ToggleSwitchTemplateSettings TemplateSettings { get; }public ToggleSwitchTemplateSettings TemplateSettings { get; }Public ReadOnly Property TemplateSettings As ToggleSwitchTemplateSettings// This API is not available in Javascript.
- Value
- ToggleSwitchTemplateSettings ToggleSwitchTemplateSettings ToggleSwitchTemplateSettings ToggleSwitchTemplateSettings
An object that provides calculated values for templates.
Methods
OnHeaderChanged(Object, Object) OnHeaderChanged(Object, Object) OnHeaderChanged(Object, Object) OnHeaderChanged(Object, Object)
Invoked when the content for Header changes.
protected : virtual void OnHeaderChanged(PlatForm::Object oldContent, PlatForm::Object newContent)protected virtual void OnHeaderChanged(Object oldContent, Object newContent)Protected Overridable Function OnHeaderChanged(oldContent As Object, newContent As Object) As void// This API is not available in Javascript.
- oldContent
- PlatForm::Object Object Object Object
The string or object content of the old content.
- newContent
- PlatForm::Object Object Object Object
The string or object content of the new content.
Remarks
Override this method in order to add steps to behavior of a custom derived class, or to change the oldContent or newContent values before passing them on to base.
OnOffContentChanged(Object, Object) OnOffContentChanged(Object, Object) OnOffContentChanged(Object, Object) OnOffContentChanged(Object, Object)
Invoked when the content for OffContent changes.
protected : virtual void OnOffContentChanged(PlatForm::Object oldContent, PlatForm::Object newContent)protected virtual void OnOffContentChanged(Object oldContent, Object newContent)Protected Overridable Function OnOffContentChanged(oldContent As Object, newContent As Object) As void// This API is not available in Javascript.
- oldContent
- PlatForm::Object Object Object Object
The string or object content of the old content.
- newContent
- PlatForm::Object Object Object Object
The string or object content of the new content that is about to display.
Remarks
Override this method in order to add steps to behavior of a custom derived class, or to change the oldContent or newContent values before passing them on to base.
OnOnContentChanged(Object, Object) OnOnContentChanged(Object, Object) OnOnContentChanged(Object, Object) OnOnContentChanged(Object, Object)
Invoked when the content for OnContent changes.
protected : virtual void OnOnContentChanged(PlatForm::Object oldContent, PlatForm::Object newContent)protected virtual void OnOnContentChanged(Object oldContent, Object newContent)Protected Overridable Function OnOnContentChanged(oldContent As Object, newContent As Object) As void// This API is not available in Javascript.
- oldContent
- PlatForm::Object Object Object Object
The string or object content of the old content.
- newContent
- PlatForm::Object Object Object Object
The string or object content of the new content that is about to display.
Remarks
Override this method in order to add steps to behavior of a custom derived class, or to change the oldContent or newContent values before passing them on to base.
OnToggled() OnToggled() OnToggled() OnToggled()
Invoked before the Toggled event is raised.
protected : virtual void OnToggled()protected virtual void OnToggled()Protected Overridable Function OnToggled() As void// This API is not available in Javascript.
Remarks
Override this method to provide a class-based behavior that should be invoked each time that the Toggled event is raised. The event data does not contain the state information, but you can determine the state from IsOn, which represents the new value.
Events
Toggled Toggled Toggled Toggled
Occurs when "On"/"Off" state changes for this ToggleSwitch.
public : event RoutedEventHandler Toggledpublic event RoutedEventHandler ToggledPublic Event Toggled// This API is not available in Javascript.
<ToggleSwitch Toggled="eventhandler"/>