WinUI2中RadioButton深色模式下PointerOver背景色失效问题

问题根源 #

WinUI2的RadioButton默认模板结构与WinUI3存在差异：未选中状态下的椭圆内部填充对应模板中的InnerEllipse元素，你当前的PointerOver视觉状态配置中缺少对该元素Fill属性的动画处理，导致鼠标悬停时椭圆背景无变化。

解决方案 #

在PointerOver视觉状态的Storyboard中添加针对InnerEllipse的Fill属性动画，对应的主题资源为RadioButtonInnerEllipseFillPointerOver。

修改后的完整PointerOver视觉状态代码：

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <!-- 新增：处理未选中状态下的椭圆内部填充 -->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerEllipse" Storyboard.TargetProperty="Fill">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonInnerEllipseFillPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Stroke">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseStrokePointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Fill">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseFillPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Stroke">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedStrokePointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Fill">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedFillPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphFillPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Stroke">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphStrokePointerOver}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

额外说明 #

如果深色模式下RadioButtonInnerEllipseFillPointerOver的默认颜色不符合预期，可在应用的资源字典中重载该资源，指定深色模式下的自定义颜色：

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="RadioButtonInnerEllipseFillPointerOver" Color="#你的深色模式悬停颜色"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

内容的提问来源于stack exchange，提问作者Blondie