Pending Review
Last Updated: 25 Apr 2024 10:15 by Simon

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>