RadioButton change background color when checked

Question

I want to override a RadioButton style to look like ToggleButton one

<RadioButton Content="Point">
    <RadioButton.Template>
        <ControlTemplate>
            <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </RadioButton.Template>
</RadioButton>

I need to change the background color of the button when it's checked. I tried with the trigger but it's not working.

score 2 · Answer 1 · edited May 23 '17 at 12:01

The solution is not a simple one. The issue is related to the fact that the togglebutton has a default background when it is checked, and that one has to be removed, before changing it to a different one.

Take a look at this topic: changing background color of togglebutton when checked

Here is the code that should do what you want (used this topic for reference remove blue highlight on buttons wpf):

 <RadioButton Content="Point">
        <RadioButton.Template>
            <ControlTemplate>
                <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                              Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" Background="Transparent">
                    <ToggleButton.Style>
                        <Style TargetType="ToggleButton">
                            <Setter Property="OverridesDefaultStyle" Value="True"/>
                            <Setter Property="Margin" Value="5"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ToggleButton">
                                        <Border Name="border" 
                                                BorderThickness="1"
                                                Padding="4,2" 
                                                BorderBrush="DarkGray" 
                                                CornerRadius="3" 
                                                Background="{TemplateBinding Background}">
                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                        </Border>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                            </Trigger>
                                            <Trigger Property="IsChecked" Value="true">
                                                <Setter TargetName="border" Property="Background" Value="Red"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ToggleButton.Style>
                </ToggleButton>
            </ControlTemplate>
        </RadioButton.Template>
    </RadioButton>

Then the op only needs to copy the control template of the topic you posted replacing the ToogleButton. — Ignacio Soler Garcia, Nov 10 '16 at 11:20

RadioButton change background color when checked

1 Answers1