How to change the size of a radio button border?

Question

XAML:

<RadioButton Margin="15" Grid.Row="0" Grid.Column="3" Style=" {StaticResource SpeedButtonStyle}" Content="TEST"/>

Style:

<!-- Speed Button Style -->
<Style x:Key="SpeedButtonStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
    <Setter Property="FontSize" Value="18px"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="Background" Value="{StaticResource SidePanelButtonBgInactive}"/>
    <Setter Property="Foreground" Value="White"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
            <Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="BorderThickness" Value="30"/>
            <Setter Property="BorderBrush" Value="White" />
            <Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
            <Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
        </Trigger>
    </Style.Triggers>        
</Style>

I am trying to change the size of the border on my radio button which is styled like a toggle button. I can change the colour of the border but not the size. it seems to be using the default size which is realy thin.

You'll need make a copy of the whole control template for that one. Whoever made the [default](https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/togglebutton-syles-and-templates) style never bound the `BorderThickness` to the Template and left it hard coded on `x:Name="Border"` to "1" so Setter won't effect it by default. — Chris W., Oct 29 '18 at 19:46
I think `BasedOn="{StaticResource {x:Type ToggleButton}}"` is coming from a visual studio frame work — Dev, Oct 30 '18 at 11:19

Korhak · Accepted Answer · 2018-11-02T01:01:52.900

I'm using my templated ToggleRadioButton and you can achieve it by binding BorderThickness to its templated parent.

<Style TargetType="RadioButton" x:Key="SpeedButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ControlTemplate.Resources>
                        <Style TargetType="{x:Type ToggleButton}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                                        <Border Background="{TemplateBinding Background}" 
                                                BorderBrush="{TemplateBinding BorderBrush}" 
                                                BorderThickness="{TemplateBinding BorderThickness}">
                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ControlTemplate.Resources>
                    <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                  Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  BorderBrush="{TemplateBinding BorderBrush}"
                                  Foreground="{TemplateBinding Foreground}"
                                  Background="{TemplateBinding Background}">
                    </ToggleButton>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="FontSize" Value="18px"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="Background" Value="Gray"/>
        <Setter Property="Foreground" Value="White"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red"/>
                <Setter Property="Foreground" Value="DarkRed"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="BorderThickness" Value="5"/>
                <Setter Property="BorderBrush" Value="White" />
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Foreground" Value="LightSeaGreen"/>
            </Trigger>
        </Style.Triggers>
    </Style>

EDIT: I think you had completely different problem. Trigger on IsMouseOver or IsChecked doesn't get rid of default Windows hover colours. So you have to get rid of that, which is achieved but templating ToggleButton with a Border on top of templating your RadioButton with that styled ToggleButton. Note that if you would want to modify it more, you have to bind it's properties in the Border as well in ToggleButton. Difference between TemplateBinding and Binding on TemplatedParent is here and furthermore TemplateBinding is only One Way, so IsChecked should be on TemplatedParent.
This should work now (at least for me it did in new project), just replace the colours.

I Tried this example in a new project and the size does not show at all — Dev, Oct 30 '18 at 11:36
@Decoder94 I don't know what you mean by size isn't showing, but intellisense doesn't work on TemplatedParent. You just write it and it works. I edited my answer for a working SpeedStyleButton. — Korhak, Oct 30 '18 at 18:13

How to change the size of a radio button border?

1 Answers1