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.

Answer 1

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.