In This Article

Switch

ToggleSwitch supports two or three check states, and includes several options for customizing the look of the switch.

Checked State

The ToggleSwitch mimics most of the functionality found in the native WPF ToggleButton, such as the IsChecked and IsThreeState properties.

The IsChecked property determines the position of the switch (up for true, down for false, or in the middle for null). By default, only true and false are supported, but if IsThreeState is set to true then null (or indeterminate) is also supported.

ScreenshotScreenshot

Two ToggleSwitch controls with one checked (left) and one unchecked (right)

When animating from one state to another, the SwitchInterval determines how long it takes the switch to travel to the new location.

Appearance

Switch Type

There are two switch types supported (circular and flat), which can be specified using the SwitchType property.

ScreenshotScreenshot

Two ToggleSwitch controls with a flat switch (left) and one with a circular switch (right)

Switch Size

The size of the switch is control by the SwitchRadiusRatio property, which is defined as a percentage of the Radius.

Brush and Effect

The switch can be broken down into two different parts; the base of the switch and then the switch itself. The brushed used for each part can be customized independenty.

The base color can be customized by setting the BaseBackground property. Additionally, the accent color (the octagon) can be customized by setting the BaseAccentBrush property.

Screenshot

ToggleSwitch with the base in red and the base accent in blue

The actual switch is made up of a ball, shaft, and a tip. The colors from these elements can be customized using BallBrush, ShaftBrush, and TipBrush respectively.

ScreenshotScreenshot

Two ToggleSwitch control, one circular and one flat, with a green ball, yellow shaft, and blue tip

The switch includes an effect that can be disabled by setting IsSwitchEffectEnabled to false.

Note

The led effect is only supported when IsSwitchEffectEnabled is set to trueand the associated brush is set to a SolidColorBrush.