Hello,
I'm trying to chanhe the color of the ToggleSwitchButton.
For example; when selected it turns green, unselected is red.
I found this article: Styling apperance and handled as such.
This gave me 200+ lines of XAML, but I cannot easily identify what to change, pleasy some guidance.
I'm on 2025 Q3 for WPF
<LinearGradientBrush x:Key="ControlOuterBorder_Normal" EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FFA9BFD6"/><GradientStop Color="#FFCDDAEA" Offset="1"/></LinearGradientBrush><LinearGradientBrush x:Key="ControlBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FFFDFEFF" Offset="0"/><GradientStop Color="#FFE6F0FA" Offset="0.5"/><GradientStop Color="#FFDCE6F4" Offset="0.5"/><GradientStop Color="#FFDDE9F7" Offset="1"/></LinearGradientBrush><SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFB8D6FB"/><LinearGradientBrush x:Key="ControlBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FFFBFCFD" Offset="0"/><GradientStop Color="#FFF6F8FB" Offset="0.5"/><GradientStop Color="#FFEDF2F9" Offset="0.5"/><GradientStop Color="#FFE5EBF4" Offset="1"/></LinearGradientBrush><SolidColorBrush x:Key="ControlOuterBorder_Pressed" Color="#FFC0CBD9"/><LinearGradientBrush x:Key="ControlBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FFC0CBD9" Offset="0"/><GradientStop Color="#FFE6EAEE" Offset="0.5"/></LinearGradientBrush><SolidColorBrush x:Key="ControlInnerBorder_Checked" Color="#00000000"/><LinearGradientBrush x:Key="ControlBackground_Checked" EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FFC0CBD9" Offset="0"/><GradientStop Color="#FFE6EAEE" Offset="0.5"/></LinearGradientBrush><Style x:Key="VATToggleSwitchButton" TargetType="{x:Type telerik:RadToggleSwitchButton}">
<Setter Property="Padding" Value="4 0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Background" Value="{StaticResource ToggleSwitchButton_TrackBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="TrackHeight" Value="20"/>
<Setter Property="ThumbHeight" Value="20"/>
<Setter Property="ThumbWidth" Value="20"/>
<Setter Property="CornerRadius" Value="2"/>
<Setter Property="TrackWidth" Value="60"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadToggleSwitchButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="{Binding TrackWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="UncheckedContent" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding UncheckedContentTemplate}" Grid.Column="2" Content="{TemplateBinding UncheckedContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Grid Grid.Column="1" Height="{TemplateBinding TrackHeight}" SnapsToDevicePixels="True">
<Border x:Name="TrackBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0">
<Rectangle x:Name="TrackInnerBackground" Fill="{TemplateBinding Background}" RadiusX="{TemplateBinding CheckedTrackRadius}" RadiusY="{TemplateBinding CheckedTrackRadius}" Stroke="{StaticResource ToggleSwitchButton_TrackInnerBorder}" StrokeThickness="0"/>
</Border>
<Border x:Name="UncheckedTrackBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
<Rectangle x:Name="UncheckedTrackInnerBackground" Fill="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}" RadiusX="{TemplateBinding UncheckedTrackRadius}" RadiusY="{TemplateBinding UncheckedTrackRadius}" Stroke="{StaticResource ToggleSwitchButton_TrackInnerBorder}" StrokeThickness="0"/>
</Border>
<Border x:Name="PART_Thumb" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" HorizontalAlignment="Left" Height="{TemplateBinding ThumbHeight}" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding ThumbWidth}">
<Border.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Border.RenderTransform>
<Grid>
<Rectangle x:Name="ThumbInnerRectangle" Fill="{StaticResource ControlBackground_Checked}" Stroke="{StaticResource ControlInnerBorder_Checked}" StrokeThickness="1"/>
<Path Height="9" Stroke="{TemplateBinding Foreground}" Width="6"/>
</Grid>
</Border>
</Grid>
<ContentPresenter x:Name="CheckedContent" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding CheckedContentTemplate}" Grid.Column="2" Content="{TemplateBinding CheckedContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="BorderBrush" TargetName="PART_Thumb" Value="{StaticResource ControlOuterBorder_Normal}"/>
<Setter Property="Fill" TargetName="ThumbInnerRectangle" Value="{StaticResource ControlBackground_Normal}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="TrackBackground" Value="1"/>
<Setter Property="Opacity" TargetName="UncheckedTrackBackground" Value="0"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="BorderBrush" TargetName="PART_Thumb" Value="{StaticResource ControlOuterBorder_Normal}"/>
<Setter Property="Fill" TargetName="ThumbInnerRectangle" Value="{StaticResource ControlBackground_Normal}"/>
<Setter Property="Opacity" TargetName="TrackBackground" Value="0"/>
<Setter Property="Opacity" TargetName="UncheckedTrackBackground" Value="1"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsKeyboardFocused" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="PART_Thumb" Value="{StaticResource ToggleSwitchButton_ThumbBorder_Focused}"/>
</MultiTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="PART_Thumb" Value="{StaticResource ControlOuterBorder_MouseOver}"/>
<Setter Property="Fill" TargetName="ThumbInnerRectangle" Value="{StaticResource ControlBackground_MouseOver}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" TargetName="PART_Thumb" Value="{StaticResource ControlOuterBorder_Pressed}"/>
<Setter Property="Fill" TargetName="ThumbInnerRectangle" Value="{StaticResource ControlBackground_Pressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="UncheckedContent" Value="0.3"/>
<Setter Property="Opacity" TargetName="CheckedContent" Value="0.3"/>
<Setter Property="Opacity" TargetName="PART_Thumb" Value="0.3"/>
<Setter Property="BorderBrush" TargetName="PART_Thumb" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter Property="Stroke" TargetName="ThumbInnerRectangle" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter Property="Fill" TargetName="ThumbInnerRectangle" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter Property="BorderBrush" TargetName="TrackBackground" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter Property="Stroke" TargetName="TrackInnerBackground" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter Property="Fill" TargetName="TrackInnerBackground" Value="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}"/>
<Setter Property="BorderBrush" TargetName="UncheckedTrackBackground" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter Property="Stroke" TargetName="UncheckedTrackInnerBackground" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter Property="Fill" TargetName="UncheckedTrackInnerBackground" Value="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}"/>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="True"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding ConverterParameter="Left" Converter="{StaticResource EnumToBooleanConverter}" Mode="OneWay" Path="ContentPosition" RelativeSource="{RelativeSource Mode=Self}"/>
<Binding ConverterParameter="Right" Converter="{StaticResource EnumToBooleanConverter}" Mode="OneWay" Path="ContentPosition" RelativeSource="{RelativeSource Mode=Self}"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" TargetName="UncheckedContent" Value="Hidden"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="False"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding ConverterParameter="Left" Converter="{StaticResource EnumToBooleanConverter}" Mode="OneWay" Path="ContentPosition" RelativeSource="{RelativeSource Mode=Self}"/>
<Binding ConverterParameter="Right" Converter="{StaticResource EnumToBooleanConverter}" Mode="OneWay" Path="ContentPosition" RelativeSource="{RelativeSource Mode=Self}"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" TargetName="CheckedContent" Value="Hidden"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="{x:Null}"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding ConverterParameter="Left" Converter="{StaticResource EnumToBooleanConverter}" Mode="OneWay" Path="ContentPosition" RelativeSource="{RelativeSource Mode=Self}"/>
<Binding ConverterParameter="Right" Converter="{StaticResource EnumToBooleanConverter}" Mode="OneWay" Path="ContentPosition" RelativeSource="{RelativeSource Mode=Self}"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" TargetName="CheckedContent" Value="Hidden"/>
<Setter Property="Visibility" TargetName="UncheckedContent" Value="Hidden"/>
</MultiDataTrigger>
<Trigger Property="ContentPosition" Value="Left">
<Setter Property="Grid.Column" TargetName="CheckedContent" Value="0"/>
<Setter Property="Grid.Column" TargetName="UncheckedContent" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Trigger>
<Trigger Property="ContentPosition" Value="Both">
<Setter Property="Grid.Column" TargetName="UncheckedContent" Value="0"/>
<Setter Property="Grid.Column" TargetName="CheckedContent" Value="2"/>
<Setter Property="HorizontalAlignment" TargetName="CheckedContent" Value="Right"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="animation:AnimationManager.AnimationSelector">
<Setter.Value>
<animation:AnimationSelector>
<animation:AnimationGroup AnimationName="CheckedAnimation">
<animation:MoveAnimation Duration="0:0:0.4" TargetElementName="PART_Thumb">
<animation:MoveAnimation.Easing>
<QuadraticEase EasingMode="EaseInOut"/>
</animation:MoveAnimation.Easing>
</animation:MoveAnimation>
<animation:FadeAnimation Direction="Out" Duration="0:0:0.4" TargetElementName="UncheckedTrackBackground"/>
<animation:FadeAnimation Direction="In" Duration="0:0:0.4" TargetElementName="TrackBackground"/>
</animation:AnimationGroup>
<animation:AnimationGroup AnimationName="UncheckedAnimation">
<animation:MoveAnimation Duration="0:0:0.4" TargetElementName="PART_Thumb">
<animation:MoveAnimation.Easing>
<QuadraticEase EasingMode="EaseInOut"/>
</animation:MoveAnimation.Easing>
</animation:MoveAnimation>
<animation:FadeAnimation Direction="Out" Duration="0:0:0.4" TargetElementName="TrackBackground"/>
<animation:FadeAnimation Direction="In" Duration="0:0:0.4" TargetElementName="UncheckedTrackBackground"/>
</animation:AnimationGroup>
<animation:AnimationGroup AnimationName="IsThreeStateUncheckedAnimation">
<animation:MoveAnimation Duration="0:0:0.4" TargetElementName="PART_Thumb">
<animation:MoveAnimation.Easing>
<QuadraticEase EasingMode="EaseInOut"/>
</animation:MoveAnimation.Easing>
</animation:MoveAnimation>
</animation:AnimationGroup>
<animation:AnimationGroup AnimationName="IndeterminateAnimation">
<animation:MoveAnimation Duration="0:0:0.4" TargetElementName="PART_Thumb">
<animation:MoveAnimation.Easing>
<QuadraticEase EasingMode="EaseInOut"/>
</animation:MoveAnimation.Easing>
</animation:MoveAnimation>
<animation:FadeAnimation Direction="Out" Duration="0:0:0.4" TargetElementName="TrackBackground"/>
<animation:FadeAnimation Direction="In" Duration="0:0:0.4" TargetElementName="UncheckedTrackBackground"/>
</animation:AnimationGroup>
</animation:AnimationSelector>
</Setter.Value>
</Setter>
Jeroen
2 Answers, 1 is accepted
Hello Jeroen,
Generally, when a modification of the ControlTemplates of our controls is required, the suggestion from this article should be followed.
With this in mind, for this scenario, by changing the color of the RadToggleSwitchButton element, are you referring to the track part of it? If this is indeed the case, set the Background property of the Border elements with x:Name="TrackBackground" and x:Name="UncheckedTrackBackground". Each of these elements contains an additional Rectangle element in it that has x:Name="TrackInnerBackground" and x:Name="UncheckedTrackInnerBackground", on which you could either set their Fill property or omit it and use the background color of the mentioned Border elements.The following code snippet showcases the above suggestion's implementation with the extracted ControlTemplate of RadToggleSwitchButton for the Windows 7 theme:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--This resource dictionary is merged, in order to prevent the extraction of additional StaticResources from the below ControlTemplate-->
<!--It comes from the Telerik.Windows.Controls assembly-->
<ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericWindows7.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="telerik:RadToggleSwitchButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadToggleSwitchButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TrackWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="UncheckedContent"
Grid.Column="2"
Margin="{TemplateBinding Padding}"
TextBlock.Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding UncheckedContent}"
ContentTemplate="{TemplateBinding UncheckedContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
RecognizesAccessKey="True"/>
<Grid Grid.Column="1" SnapsToDevicePixels="True" Height="{TemplateBinding TrackHeight}">
<Border x:Name="TrackBackground"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="Green"
Opacity="0">
<Rectangle x:Name="TrackInnerBackground"
Stroke="{StaticResource ToggleSwitchButton_TrackInnerBorder}"
StrokeThickness="0"
RadiusX="{TemplateBinding CheckedTrackRadius}"
RadiusY="{TemplateBinding CheckedTrackRadius}"/>
</Border>
<Border x:Name="UncheckedTrackBackground"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="Red">
<Rectangle x:Name="UncheckedTrackInnerBackground"
Stroke="{StaticResource ToggleSwitchButton_TrackInnerBorder}"
StrokeThickness="0"
RadiusX="{TemplateBinding UncheckedTrackRadius}"
RadiusY="{TemplateBinding UncheckedTrackRadius}"/>
</Border>
<Border x:Name="PART_Thumb"
Width="{TemplateBinding ThumbWidth}"
Height="{TemplateBinding ThumbHeight}"
HorizontalAlignment="Left"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="2"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Border.RenderTransform>
<Grid>
<Rectangle x:Name="ThumbInnerRectangle" Fill="{StaticResource ControlBackground_Checked}" Stroke="{StaticResource ControlInnerBorder_Checked}" StrokeThickness="1"/>
<Path Stroke="{TemplateBinding Foreground}" Data="M0.5,0 L0.5,9 M2.5,0 L2.5,9 M4.5,0 L4.5,9" Width="6" Height="9"/>
</Grid>
</Border>
</Grid>
<ContentPresenter x:Name="CheckedContent"
Grid.Column="2"
Margin="{TemplateBinding Padding}"
TextBlock.Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding CheckedContent}"
ContentTemplate="{TemplateBinding CheckedContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_Normal}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="TrackBackground" Property="Opacity" Value="1"/>
<Setter TargetName="UncheckedTrackBackground" Property="Opacity" Value="0"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_Normal}"/>
<Setter TargetName="TrackBackground" Property="Opacity" Value="0"/>
<Setter TargetName="UncheckedTrackBackground" Property="Opacity" Value="1"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsKeyboardFocused" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_ThumbBorder_Focused}"/>
</MultiTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_MouseOver}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_MouseOver}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Pressed}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_Pressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="UncheckedContent" Property="Opacity" Value="0.3"/>
<Setter TargetName="CheckedContent" Property="Opacity" Value="0.3"/>
<Setter TargetName="PART_Thumb" Property="Opacity" Value="0.3"/>
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Stroke" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="TrackBackground" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter TargetName="TrackInnerBackground" Property="Stroke" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="TrackInnerBackground" Property="Fill" Value="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}"/>
<Setter TargetName="UncheckedTrackBackground" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter TargetName="UncheckedTrackInnerBackground" Property="Stroke" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="UncheckedTrackInnerBackground" Property="Fill" Value="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}"/>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="True"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Left"/>
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Right"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter TargetName="UncheckedContent" Property="Visibility" Value="Hidden"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="False"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Left"/>
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Right"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter TargetName="CheckedContent" Property="Visibility" Value="Hidden"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="{x:Null}"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Left"/>
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Right"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter TargetName="CheckedContent" Property="Visibility" Value="Hidden"/>
<Setter TargetName="UncheckedContent" Property="Visibility" Value="Hidden"/>
</MultiDataTrigger>
<Trigger Property="ContentPosition" Value="Left">
<Setter TargetName="CheckedContent" Property="Grid.Column" Value="0"/>
<Setter TargetName="UncheckedContent" Property="Grid.Column" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Trigger>
<Trigger Property="ContentPosition" Value="Both">
<Setter TargetName="UncheckedContent" Property="Grid.Column" Value="0"/>
<Setter TargetName="CheckedContent" Property="Grid.Column" Value="2"/>
<Setter TargetName="CheckedContent" Property="HorizontalAlignment" Value="Right"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>The produced result is as follows:
If you would like to change the thumb's color, modify the elements inside the Border element with x:Name="PART_Thumb", which will affect the thumb when the control is checked. To modify its unchecked state, customize the Setters in the Trigger for when the IsChecked property is False.
With this being said, I attached a sample project for you to test, so, would it be possible to give it a try?
Regards,
Stenly
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Thanks,
that are the pointers I needed. I got it to work succesfully.
Thanks.
Jeroen
Hello Jeroen,
I am happy to hear that the information from my answer were of help to you and that you took the time to notify me.