This is a migrated thread and some comments may be shown as answers.

Style Slider/Thumb in RadToggleSwitchButton

1 Answer 413 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Luis
Top achievements
Rank 1
Luis asked on 24 Aug 2020, 08:36 PM

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.

 

1 Answer, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 27 Aug 2020, 11:31 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Buttons
Asked by
Luis
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or