how to override selected radiobutton background in wpf - wpf

Question

i have some problem with wpf radio button :
first of all i should add border to radio button so instead of wrapping radiobutton in border
i decide to override radiobutton default template , something like below code :
<Style TargetType="RadioButton" x:Key="navigationButton" >
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Style="{StaticResource navigationButtonBorder}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
so now i should add background color to this radiobutton when is checked but because of
overriding ,background color should apply on border(when radiobutton is checked)
but i dont know how should i do that .

Answer 1

It is very simple. Just give a name to the border and implement Triggers on the ControlTemplate.
FYI, check below code snippet (modified your code)
<Style TargetType="RadioButton" x:Key="NavigationButton">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border x:Name="MainBorder" Background="Red" Style="{StaticResource navigationButtonBorder}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="MainBorder" Property="Background" Value="Black"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Give a try and let us know in case if any further issues.

Answer 2

I advise you to separate the definition of the template and the change of colors depending on the state.
Since the template can be general, and the desired colors, in different places of the application, may be required different.
An example based on the default template:
<Window.Resources>
<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="{x:Type RadioButton}">
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{Binding BorderBrush, ElementName=radioButtonBorder}"
BorderThickness="{Binding BorderThickness, ElementName=radioButtonBorder}"
CornerRadius="100"
HorizontalAlignment="{Binding HorizontalAlignment, ElementName=radioButtonBorder}"
Margin="1,1,2,1"
VerticalAlignment="{Binding VerticalAlignment, ElementName=radioButtonBorder}">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<FrameworkElement.Resources>
<Style TargetType="RadioButton">
<Setter Property="Template" Value="{DynamicResource RadioButtonControlTemplate1}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Foreground" Value="{Binding BorderBrush, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Background" Value="#FFEE9090"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="Background" Value="LightGreen"/>
</Trigger>
</Style.Triggers>
</Style>
</FrameworkElement.Resources>
<RadioButton Content="First"/>
<RadioButton Content="Second"/>
</StackPanel>