Skip to main content

ToggleSwitch Class

A check editor that uses a movable bar to edit Boolean values.

Namespace: DevExpress.XtraEditors

Assembly: DevExpress.XtraEditors.v23.1.dll

NuGet Package: DevExpress.Win.Navigation


public class ToggleSwitch :


The ToggleSwitch is a Windows UI-style check editor that allows users to switch between two states (On and Off).

ToggleSwitch Editor

You can use the RepositoryItemToggleSwitch.OnText and RepositoryItemToggleSwitch.OffText properties to specify the editor text for the checked and unchecked states:

ToggleSwitch - CustomText

toggleSwitch1.Properties.OnText = "Enabled";
toggleSwitch1.Properties.OffText = "Disabled";

Set the RepositoryItemToggleSwitch.ShowText property to false to hide the editor text.

Editor Value

The ToggleSwitch.IsOn property stores the editor check state as a Boolean value. The ToggleSwitch.EditValue property allows you to get or set the editor check state as a value of the Object type.

When a user toggles the ToggleSwitch state, the editor switches values of these properties between true and false. You can use the RepositoryItemToggleSwitch.ValueOn and RepositoryItemToggleSwitch.ValueOff properties to assign custom values for editor states:

toggleSwitch1.Properties.ValueOff = "Disabled";
toggleSwitch1.Properties.ValueOn = "Enabled";
var a = toggleSwitch1.Properties.GetValueByState(false); // returns "Disabled"
var b = toggleSwitch1.Properties.GetStateByValue("Enabled"); // returns true
var c = toggleSwitch1.Properties.GetStateByValue("Activated"); // returns false

Call the RepositoryItemToggleSwitch.GetValueByState method to obtain a value associated with a specific editor state. The RepositoryItemToggleSwitch.GetStateByValue method returns an editor state associated with a specific value.

The ToggleSwitch.Toggle method inverts the current state. After the ToggleSwitch state is changed, the editor raises the ToggleSwitch.Toggled event.

Toggle Animation

If the RepositoryItemToggleSwitch.AllowThumbAnimation property is set to true, the ToggleSwitch displays a smooth animation when a user changes the editor state. The following image illustrates the ToggleSwitch with and without the thumb animation:

ToggleSwitch - Thumb Animation

Editor Width

The EditorToThumbWidthRatio property allows you to specify the editor width as a multiple of the thumb width:

Editor to Thumbnail Ratio

For older skins in which thumbs have a rectangular shape, you can modify the ThumbWidth property to customize the width of the thumb itself. This custom value is multiplied according to the EditorToThumbWidthRatio property value to calculate the total editor width.

Thumbnail Width


See Also