Toggle Switch Button

RadToggleSwitchButton is a control design to display two exclusive choices. The control is represented by a track in which the thumb is smoothly sliding left and right. The two states content can be customized along with their position. The button derives from our RadToggleButton control. Because of the inheritance, it has all of the features of the RadToggleButton control.

You can see how to use ICommand with a button in the Commands topic.

Figure 1: Toggle Switch Button

Defining RadToggleSwitchButton

You can instantiate RadToggleSwitchButton in both XAML and code as shown in Examples 1 and 2.

Example 1: Defining a toggle switch button in XAML

<telerik:RadToggleSwitchButton ContentPosition="Both" CheckedContent="ON" UncheckedContent="OFF" /> 

Example 2: Defining a toggle switch button in code

RadToggleSwitchButton radToggleSwitchButton = new RadToggleSwitchButton() { CheckedContent = "ON", UncheckedContent = "OFF" }; 
Dim radToggleSwitchButton As New RadToggleSwitchButton() With {  
    .CheckedContent = "ON"  
    .UncheckedContent = "OFF" 
} 

Content Position

The RadToggleSwitchButton allows you to control the position of its CheckedContent and UncheckedContent. You can do that using its ContentPosition property. This property is an enumeration of type SwitchButtonContentPosition and exposes the following values.

  • Both
  • Right (default)
  • Left

Figure 2: ContentPosition property

Enable Three-State Mode

To make RadToggleSwitchButton to go into a three-state mode you can just set its IsThreeState property to True.

Example 3: Enabling the three-state mode

<telerik:RadToggleSwitchButton IsThreeState="True" ContentPosition="Both" CheckedContent="ON" UncheckedContent="OFF" /> 

RadToggleSwitchButton Properties

The ToggleSwitchButton expose several properties which can be used to customized its appearance.

CheckedContent and UncheckedContent

Nevertheless the RadToggleSwitchButton derives from RadToggleButton, the Content property here is not respected. Two new properties are created. These properties set the check and uncheck content state of the ToggleSwitchButton. Their position depends on the ContentPosition property.

Example 4: Setting Check/UncheckContent property

<telerik:RadToggleSwitchButton CheckedContent="Red" UncheckedContent="Green" /> 

TrackHeight and TrackWidth

These properties customize the size of the ToggleSwitchButton track.

Example 5: Setting Check/UncheckContent property

<telerik:RadToggleSwitchButton UncheckedContent="Red" CheckedContent="Green" ContentPosition="Both" TrackHeight="30" TrackWidth="90" /> 

Figure 3: Change Track Height/Width

ThumbHeight and ThumbWidth

These properties customize the size of the ToggleSwitchButton track.

Example 6: Setting Thumb Height/Width property

<telerik:RadToggleSwitchButton UncheckedContent="Red" CheckedContent="Green" ContentPosition="Both" TrackHeight="30" TrackWidth="90" ThumbHeight="15" ThumbWidth="50"/> 

Figure 4: Change Thumb Height/Width

See Also

In this article
Not finding the help you need? Improve this article