Completed
Last Updated: 01 Jul 2024 11:22 by ADMIN
Release 2024.2.701 (Preview)
Simon
Created on: 25 Apr 2024 10:15
Category: Buttons
Type: Feature Request
1
RadToggleSwitchButton: allow setting Track-Radius for rounded themes

Please add an option to modify the corner radius for TrackBackground and UncheckedTrackBackground in the RadToggleSwitchButton template.

The radius of both rectangles is hard-coded to 9 (TrackBackground)  / 12 (UncheckedTrackbackground) (Why are they different btw?). While it is possible to set the TrackHeight and TrackWidth to custom values, this doesn't really work well for the Fluent theme right now due to the radii quickly becoming disproportionally large or small compared to the TrackHeight. This results in the control losing its shape and becoming more and more egg-shaped or rectangular, depending on whether you decrease or increase the TrackHeight.

Ideally, the Radii would be automatically computed, depending on the selected TrackHeight (Floor(TrackHeight/2) ?), however, a manual solution would also be a lot better than nothing. That way we could at lease define proportionally matching values via styles.

<Grid Grid.Column="1" SnapsToDevicePixels="True" Height="{TemplateBinding TrackHeight}">
                            <Rectangle x:Name="TrackBackground" RadiusX="12" RadiusY="12" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Opacity="0" StrokeThickness="{TemplateBinding BorderThickness}" />
                            <Rectangle x:Name="UncheckedTrackBackground" RadiusX="9" RadiusY="9" Fill="{StaticResource MainBrush}" Stroke="{StaticResource BasicBrush}" StrokeThickness="{TemplateBinding BorderThickness}" />
                            <Ellipse x:Name="PART_Thumb" Fill="{StaticResource MarkerInvertedBrush}" Width="{TemplateBinding ThumbWidth}" Height="{TemplateBinding ThumbHeight}"
                                     HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Margin="6 0">
                                <Ellipse.RenderTransform>
                                    <TranslateTransform X="0" Y="0" />
                                </Ellipse.RenderTransform>
                            </Ellipse>
                        </Grid>

1 comment
ADMIN
Stenly
Posted on: 02 May 2024 08:16

Hello Simon,

I have reviewed this information and it is a good addition to the API of the RadToggleSwitchButton control. I have created a new item in our internal backlog and have linked it to this one, so that you can vote for it, as well as follow it, in order to get notified via e-mail when its status gets changed.

Additionally, as a token of gratitude for bringing this to our attention, I have updated your Telerik points.

Regarding the different values of RadiusX and RadiusY properties, this is a design decision for the RadToggleSwitchButton control for the Fluent theme.

I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik

A brand new ThemeBuilder course was just added to the Virtual Classroom. The training course was designed to help you get started with ThemeBuilder for styling Telerik and Kendo UI components for your applications. You can check it out at https://learn.telerik.com