Style Slider/Thumb in RadToggleSwitchButton

[Luis]

I have been trying to change the Thumb color in my RadToggleSwitchButton.

I have the following code:

<telerik:RadToggleSwitchButton
                Grid.Row="15"
                Margin="0,0,0,0"
                Padding="0"
                ContentPosition="Both"
                Foreground="White"
                IsChecked="{Binding IsRadToggleSwitchButtonChecked}">
                <telerik:StyleManager.Theme>
                    <telerik:MaterialTheme />
                </telerik:StyleManager.Theme>

                <ToggleButton.LayoutTransform>
                    <RotateTransform Angle="90" />
                </ToggleButton.LayoutTransform>
                <telerik:RadToggleSwitchButton.UncheckedContent>
                    <Border>
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="10"
                            FontWeight="Bold"
                            Foreground="White"
                            TextAlignment="Center">
                            <TextBlock.LayoutTransform>
                                <RotateTransform Angle="-90" />
                            </TextBlock.LayoutTransform>
                            T1<LineBreak />
                            t1</TextBlock>
                    </Border>
                </telerik:RadToggleSwitchButton.UncheckedContent>

                <telerik:RadToggleSwitchButton.CheckedContent>
                    <Border>
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="10"
                            FontWeight="Bold"
                            Foreground="White"
                            TextAlignment="Center">
                            <TextBlock.LayoutTransform>
                                <RotateTransform Angle="-90" />
                            </TextBlock.LayoutTransform>
                            T2<LineBreak />
                            t2</TextBlock>
                    </Border>
                </telerik:RadToggleSwitchButton.CheckedContent>
            </telerik:RadToggleSwitchButton>

 

I want to change these orange/white colors in the image attached.

 

[Dinko | Tech Support Engineer]

Hello Luis,

Thank you for the provided code snippet. 

You will need to extract and modify the control's template to change the color of the thumb in its different states. First, I would suggest using NoXAML binaries to change the theme. You can check the Setting a Theme help article which described how you can change the theme. After this, you can check the Editing Control Templates help article which describes how to get the default templates of our controls. In your case, after the extraction of the template, you can change the ControlTemplate.Triggers by setting a custom color for the Part_Thumb element.

I have prepared a sample project to better demonstrate the approach above. You can find it attached to this reply.

Regards,
Dinko
Progress Telerik