WPF Mouseover resets control color - wpf

Question

I am creating a style for a radiobutton, and change the color of the radiobutton when it is clicked. However, I would like to make it such that when you mouseover the radiobutton, it changes color as well. I have the basics implemented, but when the radiobutton is already selected (and thus has a different color), if it gets a mouseover, the color changes to that new color, and when mouseover is done (the mouse leaves it), the color goes back to the original, unselected color.
Is there a way for it to know when it is clicked to go to the right color? (The TargetName Border is just a Border class)
<Style x:Key="MyRadioButton" TargetType="{x:Type RadioButton}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Border x:Name="Border" Margin="1" CornerRadius="5" HorizontalAlignment="Center"
Width="50" Background="White" Padding="2" SnapsToDevicePixels="true">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlLightColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

Use this Style, and place two diff RadioButtons to test Unchecked state :
<Style TargetType="{x:Type RadioButton}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Border x:Name="Border" Margin="1" CornerRadius="5" HorizontalAlignment="Center"
Width="50" Padding="2" SnapsToDevicePixels="true">
<Border.Background>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Border x:Name="InnerBorder" Margin="1" CornerRadius="5" HorizontalAlignment="Center"
Width="50" Background="Transparent" Padding="2" SnapsToDevicePixels="true"/>
<Border x:Name="OuterBorder" Margin="1" CornerRadius="5" HorizontalAlignment="Center"
Width="50" Background="Transparent" Padding="2" SnapsToDevicePixels="true"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Red" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Pink" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Yellow" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Transparent" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>