RadioButton (MouseOver) WPF 中错误的 SVG 图标突出显示

Question

你好社区

问题是 RadioButtons 的突出显示，当鼠标悬停在其中一个 RadioButtons 上时，所有 RadionButtons 都会更改突出显示颜色。实际上只有选定的单选按钮应该改变高亮颜色。看图片：

enter image description here

几乎与我用于按钮的代码相同，突出显示的颜色可以正常工作，请看图片。 enter image description here

带有 SVG 图像的 RadioButton 的样式代码如下：

资源：

<!--  Start Path Style for NavigationRadioButtonTextIcon -->
    <Style TargetType="RadioButton" x:Key="NavigationRadioButtonTextIcon" >
        <Setter Property="Width" Value="auto"/>
        <Setter Property="Height" Value="40" />
        <Setter Property="Padding" Value="8 4"/>
        <Setter Property="FontSize" Value="22"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="Background" Value="{StaticResource DarkGrayColorBrush}"/>
        <Setter Property="Foreground" Value="#8C7E8B"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Grid x:Name="MainGrid" 
                          Background="{TemplateBinding Background}"
                          SnapsToDevicePixels="True">
                        <TextBlock Text="{TemplateBinding Content}"
                                   Padding="{TemplateBinding Padding}"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        <Path x:Name="pathIcon"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="{TemplateBinding Content}"
                              Fill="{TemplateBinding Foreground}" />
                        <ContentPresenter x:Name="contentPresenter" 
                                          HorizontalAlignment="Left" 
                                          VerticalAlignment="Center"
                                          RecognizesAccessKey="True" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" Value="{StaticResource LightGrayColorBrush}" TargetName="MainGrid"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="{StaticResource LightGrayColor}" 
                                        Duration="0:0:0.25" 
                                        Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="{StaticResource DarkGrayColor}" 
                                        Duration="0:0:0.25" 
                                        Storyboard.TargetProperty="Background.Color"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
<!--  EndPath Style for NavigationRadioButtonTextIcon -->

 <!--  Start Path Style for ContentRadioButtonPath -->
    <Style TargetType="{x:Type Path}" 
           x:Key="ContentRadioButtonPathStyle">
        <Setter Property="Width" Value="26"/>
        <Setter Property="Height" Value="26"/>
        <Setter Property="Stretch" Value="Fill"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=IsMouseOver}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                <LinearColorKeyFrame KeyTime="0:0:0.2" 
                                                     Value="{StaticResource ButtonIconSecundaryColor}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                <LinearColorKeyFrame KeyTime="0:0:0.2" 
                                                     Value="{StaticResource ButtonIconPrimaryColor}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    <!--  End Path Style for ContentRadioButtonPath -->

**单选按钮**

<RadioButton Grid.Row="1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="5"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="10"/>
                            </Grid.ColumnDefinitions>

                            <Path Style="{StaticResource ContentRadioButtonPathStyle}" 
                                  Grid.Column="1"
                                  Data="{StaticResource HomeIconSVG}" 
                                  Fill="{StaticResource ButtonIconPrimaryColorBrush}" />
                            <TextBlock Text="Home"
                                       Grid.Column="3"
                                       Style="{StaticResource TextForRadioButton}" />
                        </Grid>
</RadioButton>
   <RadioButton Grid.Row="2">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="5"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="10"/>
                            </Grid.ColumnDefinitions>

                            <Path Style="{StaticResource ContentRadioButtonPathStyle}" 
                                  Grid.Column="1"
                                  Data="{StaticResource CreateIconSVG}" 
                                  Fill="{StaticResource ButtonIconPrimaryColorBrush}" />
                            <TextBlock Text="Create"
                                       Grid.Column="3"
                                       Style="{StaticResource TextForRadioButton}" />
                        </Grid>
</RadioButton>

社区中有人可以帮助我解决这个问题或一些解决问题的技巧。

感谢您的帮助

Answer 1

因为您的 Storyboard 明确针对控件的 Background 的 Color 属性，所以您还应该在 Background Setter 中明确分配一个 SolidColorBrush：

<Setter Property="Background">
    <Setter.Value>
        <SolidColorBrush Color="{StaticResource DarkGrayColor}"/>
    </Setter.Value>
</Setter>

这同样适用于分配给 Path 的 Fill 属性的共享资源：

<Path ...>
    <Path.Fill>
       <SolidColorBrush Color="{StaticResource ButtonIconPrimaryColor}" />
    </Path.Fill>
<Path>