Edit this page

Toggle Button

RadToggleButton inherits from the native ToggleButton control and implements the ICommandSource interface. Because of the inheritance, it has all of the features of the native ToggleButton control. The ICommandSource implementation allows you to attach commands to the button, which will get executed when it gets clicked.

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

Figure 1: Toggle button

Defining RadToggleButton

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

Example 1: Defining a button in XAML

<telerik:RadToggleButton Content="Toggle Me!" />

Example 2: Defining a button in code

RadToggleButton radToggleButton = new RadToggleButton() { Content = "Toggle Me!" };
Dim radToggleButton As New RadToggleButton() With { _
    .Content = "Toggle Me!" _

Enable Three State Mode

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

Example 5: Enabling the three-state mode

<telerik:RadToggleButton IsThreeState="True" />

Toggle Events

The button provides a set of events that are fired when you toggle it.

  • Checked: This event is fired when the button is toggled on.
  • Unchecked: This event is fired when the button is toggled off.
  • Activate: This event is fired when the button is toggled on or off.

As any other button, RadToggleButton exposes a Click event, too. Additionally, the control has PreviewClick event.

The toggle state of the button can be manually controlled via its IsChecked property.

Here is an example of handling the Checked event of a button.

Example 3: Subscribing to the Checked event

<telerik:RadToggleButton Content="Toggle Me!" Checked="RadToggleButton_Checked" />

Example 4: Defining a Checked event handler

private void RadToggleButton_Checked(object sender, RoutedEventArgs e)
    //implement your logic here
Private Sub RadToggleButton_Checked(sender As Object, e As RoutedEventArgs)
    'implement your logic here'
End Sub

Customizing RadToggleButton

  • IsBackgroundVisible: This property controls the visibility of the background and the border of the button when in normal state.

    Figure 2: Toggle button with hidden background

  • CornerRadius: This property controls the corner radius of the button.

    Figure 3: Toggle button with its CornerRadius set to 15

See Also