In this post we will learn to use RadToggleSwitch in three simple steps. RadToggleSwitch controls gives you experience of on and off button. It is a binary state control and can be either in state of on or off. You may get experience of RadToggleSwitch as following

Follow the below steps to start working with RadToggleSwitch. This control is very much configurable and you can put button and header styling as per your application requirement.

Step1

Very first you need to add reference of Telerik.Windows.Controls.Primptive on xaml.

Step 2

After adding namespace add RadToggleSwitch on the application page. You can add that as following

While adding RadToggleSwitch we can configure value of header. If needed, you can define HeaderStyle and HeaderTemplate specific to your application. By default accent color of device get applied as background color of RadToggleSwitch. You can set IsChecked property to either true or false. If you do not set it then it takes default value false. One important property is ButtonStyle. You can configure this property to give different look to toggle button.

Below is the consolidated code. On the xaml we have put four RadToggleSwitch control.

<phone:PhoneApplicationPage
x:Class="processapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Demo App" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="toggle switch" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<telerikPrimitives:RadToggleSwitch
x:Name="tglWifi"
Header="WiFi"
Grid.Row="0"
/>
<telerikPrimitives:RadToggleSwitch
x:Name="tglBlueTooth"
Header="BlueTooth"
Grid.Row="1"
IsChecked="True"/>

<telerikPrimitives:RadToggleSwitch
x:Name="tglDataNetwrok"
Header="Cellular Data"
Grid.Row="2"
IsChecked="True"/>

<telerikPrimitives:RadToggleSwitch
x:Name="tglSharing"
Header="Sharing"
Grid.Row="3"
IsChecked="False"/>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

Step 3

You can handle check and uncheck event on RadToggleSwitch. You can perform operation corresponding to on in check event and corresponding to off in uncheck event. For example in below code I am changing header of the RadToggleSwitch in check and uncheck event

And we have attached the event to RadToggleSwitch in constructor of the page as given below,

Output

When you run above application you should get expected output as following. When you toggle Data Sharing button, you will notice header is getting changed.

In this way you can work with RadToggleSwitch. I hope you find this post useful. Thanks for reading.