ToggleSwitch.SwitchThumbTemplate Property

Gets or sets a template used to render the editor’s thumb. This is a dependency property.

Namespace: DevExpress.Xpf.Editors

Assembly: DevExpress.Xpf.Core.v24.1.dll

NuGet Package: DevExpress.Wpf.Core

Declaration

C#

public DataTemplate SwitchThumbTemplate { get; set; }

VB.NET

Public Property SwitchThumbTemplate As DataTemplate

Property Value

Type	Description
DataTemplate	A DataTemplate object representing the template that defines the appearance of the editor’s thumb.

Example

This example demonstrates how to customize the ToggleSwitch appearance using the ToggleSwitch.SwitchBorderTemplate and ToggleSwitch.SwitchThumbTemplate templates.

Xaml

<Window x:Class="ToggleSwitchDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ToggleSwitchDemo"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="borderTemplate">
                <Border x:Name="border" Width="44" 
                        Background="White" 
                        BorderThickness="2" 
                        BorderBrush="#FF333333" 
                        CornerRadius="10"/>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType=ToggleButton}}" Value="True">
                        <Setter Property="Background" TargetName="border" Value="#FF0078D7"/>
                        <Setter Property="BorderThickness" TargetName="border" Value="0"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
            <DataTemplate x:Key="thumbTemplate">
                <Ellipse x:Name="thumb"
                         Fill="#FF333333" 
                         VerticalAlignment="Center" HorizontalAlignment="Center"
                         Width="10" Height="10" Margin="8,0"/>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType=ToggleButton}}" Value="True">
                        <Setter Property="Fill" TargetName="thumb" Value="White"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Grid.Resources>

        <dxe:ToggleSwitch SwitchBorderTemplate="{StaticResource borderTemplate}"
                          SwitchThumbTemplate="{StaticResource thumbTemplate}"
                          Width="100"
                          Height="20"
                          Margin="10" 
                          VerticalAlignment="Center"
                          HorizontalAlignment="Center"
                          CheckedStateContent="On" 
                          UncheckedStateContent="Off" 
                          ContentPlacement="Far"/>
    </Grid>
</Window>

The image below illustrates the result.