Custom template for radio button and using Visual State - xaml

Question

This is a custom style that i am using for a radio button.The concept is to flip the foreground and background color between checked and unchecked state. Everything works fine until i move mouse over a checked button and move it out.
The foreground switches back to Primary Color.
TO Clarify this it what i think is happening.
When the button is clicked, the checked state gets active.
When you move the pointer over, PointerOver state gets active and changes the foreground to WhiteTextAndIcons color.
When the pointer moves out the foreground return to default which is PrimaryColor, hence it matches the background.
What i need is , if the state is checked then the foreground should not default back, when pointer is moved in or out. Is this possible via style?
This is the workaround i am using, but i want to know what am i doing wrong here.
Workaround:
private void MainPage_PointerExited(object sender, PointerRoutedEventArgs e)
{
if(sender is RadioButton)
{
var radio = sender as RadioButton;
if(radio.IsChecked.HasValue && radio.IsChecked.Value)
{
radio.IsChecked = false;
radio.IsChecked = true;
}
}
}
Color and Custom Template.
<Color x:Key="DarkPrimaryColor">#FF1664A7</Color>
<Color x:Key="PrimaryColor">#FF0078D7</Color>
<Color x:Key="LightPrimaryColor">#FF2488D8</Color>
<Color x:Key="WhiteTextAndIcons">#FFFFFFFF</Color>
<SolidColorBrush x:Key="NavButtonPressedBackgroundBrush" Color="{ThemeResource PrimaryColor}" />
<SolidColorBrush x:Key="NavButtonHoverBackgroundBrush" Color="{ThemeResource LightPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedBackgroundBrush" Color="{ThemeResource PrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedPressedBackgroundBrush" Color="{ThemeResource DarkPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedHoverBackgroundBrush" Color="{ThemeResource LightPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedForegroundBrush" Color="{ThemeResource WhiteTextAndIcons}" />
<SolidColorBrush x:Key="NavButtonForegroundBrush" Color="{ThemeResource PrimaryColor}" />
<Style TargetType="RadioButton" x:Key="SplitViewRadioButtonWithWhiteBGStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource NavButtonForegroundBrush}" />
<Setter Property="Padding" Value="1,4,0,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="HoverBackground.Visibility" Value="Visible"/>
<Setter Target="CheckedHoverBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="PressedBackground.Visibility" Value="Visible"/>
<Setter Target="CheckedPressedBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckedBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" />
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Rectangle" x:Name="FocusVisual">
<Setter Property="Opacity" Value="0" />
<Setter Property="StrokeDashArray" Value="1,1" />
<Setter Property="StrokeEndLineCap" Value="Square" />
</Style>
</Grid.Resources>
<!-- background -->
<Grid x:Name="NotCheckedBackground" Grid.ColumnSpan="4">
<Rectangle x:Name="PressedBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonPressedBackgroundBrush}"/>
<Rectangle x:Name="HoverBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonHoverBackgroundBrush}"/>
</Grid>
<Grid x:Name="CheckedBackground" Grid.ColumnSpan="4" Visibility="Collapsed" Background="{StaticResource NavButtonCheckedBackgroundBrush}">
<Rectangle x:Name="CheckedPressedBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonCheckedPressedBackgroundBrush}"/>
<Rectangle x:Name="CheckedHoverBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonCheckedHoverBackgroundBrush}"/>
</Grid>
<!-- focus -->
<Rectangle x:Name="FocusVisualWhite" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashOffset="1.5" Style="{StaticResource FocusVisual}" />
<Rectangle x:Name="FocusVisualBlack" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashOffset="0.5" Style="{StaticResource FocusVisual}" />
<!-- glyph -->
<ContentPresenter x:Name="NixonGlyph" Content="{TemplateBinding Tag}" />
<!-- text -->
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>