Toggle​Switch Toggle​Switch Toggle​Switch 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
<ToggleSwitch .../>
-or-
<ToggleSwitch ...>
  oneOrMorePropertyElementComponents
</ToggleSwitch>
Inheritance
Attributes
Windows 10 requirements
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.

Toggle switch control

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&lt;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 keyDescription
ToggleSwitchContainerBackgroundBackground color of entire control bounds at rest
ToggleSwitchContainerBackgroundPointerOverBackground color on hover
ToggleSwitchContainerBackgroundPressedBackground color when pressed
ToggleSwitchContainerBackgroundDisabledBackground color when disabled
ToggleSwitchContentForegroundLabel text color at rest
ToggleSwitchContentForegroundDisabledLabel text color when disabled
ToggleSwitchHeaderForegroundHeader text color at rest
ToggleSwitchHeaderForegroundDisabledHeader text color when disabled
ToggleSwitchFillOffBackground color of switch control part in "Off" state
ToggleSwitchFillOffPointerOverBackground olor of switch control part in "Off" state on hover
ToggleSwitchFillOffPressedBackground color of switch control part in "Off" state when pressed
ToggleSwitchFillOffDisabledBackground color of switch control part in "Off" state when disabled
ToggleSwitchFillOnBackground color of switch control part in "On" state
ToggleSwitchFillOnPointerOverBackground color of switch control part in "On" state on hover
ToggleSwitchFillOnPressedBackground color of switch control part in "On" state when pressed
ToggleSwitchFillOnDisabledBackground color of switch control part in "On" state when disabled
ToggleSwitchStrokeOffBorder color of switch control part in "Off" state
ToggleSwitchStrokeOffPointerOverBorder color of switch control part in "Off" state on hover
ToggleSwitchStrokeOffPressedBorder color of switch control part in "Off" state when pressed
ToggleSwitchStrokeOffDisabledBorder color of switch control part in "Off" state when disabled
ToggleSwitchStrokeOnBorder color of switch control part in "On" state
ToggleSwitchStrokeOnPointerOverBorder color of switch control part in "On" state on hover
ToggleSwitchStrokeOnPressedBorder color of switch control part in "On" state when pressed
ToggleSwitchStrokeOnDisabledBorder color of switch control part in "On" state when disabled
ToggleSwitchKnobFillOffColor of switch control's knob in "Off" state
ToggleSwitchKnobFillOffPointerOverColor of switch control's knob in "Off" state on hover
ToggleSwitchKnobFillOffPressedColor of switch control's knob in "Off" state when pressed
ToggleSwitchKnobFillOffDisabledColor of switch control's knob in "Off" state when disabled
ToggleSwitchKnobFillOnColor of switch control's knob in "On" state
ToggleSwitchKnobFillOnPointerOverColor of switch control's knob in "On" state on hover
ToggleSwitchKnobFillOnPressedColor of switch control's knob in "On" state when pressed
ToggleSwitchKnobFillOnDisabledColor of switch control's knob in "On" state when disabled

Constructors

ToggleSwitch() ToggleSwitch() ToggleSwitch()

Initializes a new instance of the ToggleSwitch class.

public : ToggleSwitch()public ToggleSwitch()Public Sub New()
Attributes

Properties

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
<ToggleSwitch Header="textContent" />
Value
PlatForm::Object object object

The header content for the ToggleSwitch.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the Header dependency property.

Attributes

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
<ToggleSwitch>
  <ToggleSwitch.HeaderTemplate>
    singleDataTemplate
  </ToggleSwitch.HeaderTemplate>
</ToggleSwitch>
Value
DataTemplate DataTemplate DataTemplate

The DataTemplate used to display the control's header.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the HeaderTemplate dependency property.

Attributes

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
<ToggleSwitch IsOn="bool" />
Value
PlatForm::Boolean bool bool

true if the state is "On"; false if the state is "Off".

Attributes

Remarks

"On" state uses the template from OnContentTemplate. "Off" state uses the template from OffContentTemplate.

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsOn dependency property.

Attributes

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
<ToggleSwitch OffContent="stringContent"/>
Value
PlatForm::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.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the OffContent dependency property.

Attributes

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
<ToggleSwitch>
  <ToggleSwitch.OffContentTemplate>
    singleDataTemplate
  </ToggleSwitch.OffContentTemplate>
</ToggleSwitch>
Value
DataTemplate DataTemplate DataTemplate

The DataTemplate that displays the control's content while in "Off" state.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the OffContentTemplate dependency property.

Attributes

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
<ToggleSwitch OnContent="stringContent"/>
Value
PlatForm::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.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the OnContent dependency property.

Attributes

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
<ToggleSwitch>
  <ToggleSwitch.OnContentTemplate>
    singleDataTemplate
  </ToggleSwitch.OnContentTemplate>
</ToggleSwitch>
Value
DataTemplate DataTemplate DataTemplate

The DataTemplate that displays the control's content while in "On" state.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the OnContentTemplate dependency property.

Attributes

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
Value
ToggleSwitchTemplateSettings ToggleSwitchTemplateSettings ToggleSwitchTemplateSettings

An object that provides calculated values for templates.

Attributes

Methods

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
Parameters
oldContent
PlatForm::Object Object Object

The string or object content of the old content.

newContent
PlatForm::Object Object Object

The string or object content of the new content.

Attributes

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)

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
Parameters
oldContent
PlatForm::Object Object Object

The string or object content of the old content.

newContent
PlatForm::Object Object Object

The string or object content of the new content that is about to display.

Attributes

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)

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
Parameters
oldContent
PlatForm::Object Object Object

The string or object content of the old content.

newContent
PlatForm::Object Object Object

The string or object content of the new content that is about to display.

Attributes

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()

Invoked before the Toggled event is raised.

protected : virtual void OnToggled()protected virtual void OnToggled()Protected Overridable Function OnToggled() As void
Attributes

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

Occurs when "On"/"Off" state changes for this ToggleSwitch.

public : event RoutedEventHandler Toggledpublic event RoutedEventHandler ToggledPublic Event Toggled
<ToggleSwitch Toggled="eventhandler"/>
Attributes

See Also