Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

ToggleSwitch.SwitchBorderTemplate Property

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

Namespace: DevExpress.Xpf.Editors

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

NuGet Package: DevExpress.Wpf.Core

#Declaration

public DataTemplate SwitchBorderTemplate { get; set; }

#Property Value

Type Description
DataTemplate

A DataTemplate object representing the template that defines the appearance of the editor’s background.

#Example

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

<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.

See Also