Custom Hover and Select RadioButton in RadioGroup WPF XAML-CodePudding

I'm trying to create a hover and select effect on a radio button within a group So far it works but if I hover on a button that has once been selected the hover effect doesn't work> Hovering on a button that hasn't previously been selected works and also the isChecked state seems to work. Also how do I deselect a radio button on click so that no button is selected within the group. Thanks for any help or pointers.

<Color x:Key="Hover" R="135" G="0" B="0" A="255" />
<Color x:Key="Default" R="40" G="40" B="40" A="255" /> 
<Color x:Key="Selected" R="0" G="255" B="0" A="255" />

<!-- // CustomRadioButton // -->
<Style TargetType="{x:Type RadioButton}" x:Key="CustomRadioButton">

    <Style.Setters>
        <Setter Property="Template">

            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Border x:Name="tabRadBtn" Margin="10" 
                        Width="60" BorderThickness="0"> 

                    <TextBlock Background="Transparent" x:Name="ToggleData"
                            Text="{TemplateBinding Property=Content}" 
                            HorizontalAlignment="Center" VerticalAlignment="Center">
                        
                        <TextBlock.Foreground>
                            <SolidColorBrush x:Name="ToggleColor" Color="{StaticResource Default}"/>
                        </TextBlock.Foreground>
                        
                    </TextBlock>

                </Border>

                <ControlTemplate.Triggers>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsEnabled" Value="True"/>
                            <Condition Property="IsChecked" Value="False"/>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="EnterRadioButtonHover">
                                    <ColorAnimation Storyboard.TargetName="ToggleColor" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource Hover}" Duration="0:0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="ExitRadioButtonHover">
                                    <ColorAnimation Storyboard.TargetName="ToggleColor" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource Default}" Duration="0:0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                    </MultiTrigger>
                    
                    <MultiTrigger>
                        
                        <MultiTrigger.Conditions>
                            <Condition Property="IsChecked" Value="True"/>
                            <Condition Property="IsEnabled" Value="True"/>
                        </MultiTrigger.Conditions> 

                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="EnterRadioButtonSelect">
                                    <ColorAnimation Storyboard.TargetName="ToggleColor" 
                                                Storyboard.TargetProperty="Color"
                                                To="{StaticResource Selected}" Duration="0:0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard x:Name="ExitRadioButtonSelect">
                                    <ColorAnimation Storyboard.TargetName="ToggleColor" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource Default}" Duration="0:0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                        
                    </MultiTrigger> 
                    
                </ControlTemplate.Triggers>
                
            </ControlTemplate>
        </Setter.Value>
        
    </Setter>
</Style.Setters>

CodePudding user response：

Set ExitActions ColorAnimation Property - FillBehavior="Stop" -

<MultiTrigger.ExitActions>
    <BeginStoryboard>
        <Storyboard x:Name="ExitRadioButtonHover">
            <ColorAnimation Storyboard.TargetName="ToggleColor" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
        </Storyboard>
    </BeginStoryboard>
</MultiTrigger.ExitActions>

...

<MultiTrigger.ExitActions>
    <BeginStoryboard>
        <Storyboard x:Name="ExitRadioButtonSelect">
            <ColorAnimation Storyboard.TargetName="ToggleColor" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
        </Storyboard>
    </BeginStoryboard>
</MultiTrigger.ExitActions>