已应用ControlTemplate的自定义Button鼠标悬停颜色修改及失效问题

问题 #

将给定样式应用于继承自Button的自定义用户控件uc:FunctionButton后，鼠标悬停状态完全不生效，甚至无法触发悬停事件。

核心问题分析 #

• 指针事件无法捕获：如果MyPanel的Background未显式设置（默认可能为null），该元素会被命中测试忽略，导致指针悬停事件无法触发。
• 无效的Setter引用：PointerOver状态中指向ContentPresenter的Setter毫无意义——模板里根本没有这个元素，这些无效设置会干扰状态切换逻辑。
• 动画与状态不匹配：Normal和PointerOver状态都用了PointerUpThemeAnimation，这是点击抬起时的动画，和悬停状态不匹配。

修改后的有效样式 #

<Style
    x:Key="FunctionButtonStyle"
    TargetType="uc:FunctionButton">
    <!-- 默认背景设为Transparent，确保未显式设置背景时也能捕获指针事件 -->
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="uc:FunctionButton">
                <RelativePanel
                    x:Name="MyPanel"
                    Background="{TemplateBinding Background}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    IsHitTestVisible="True">
                    <SymbolIcon
                        Margin="5"
                        RelativePanel.AlignTopWithPanel="True"
                        Symbol="{TemplateBinding Symbol}"
                        Foreground="{TemplateBinding Foreground}">
                        <SymbolIcon.RenderTransform>
                            <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5" />
                        </SymbolIcon.RenderTransform>
                    </SymbolIcon>
                    <TextBlock
                        Margin="5"
                        FontSize="10"
                        RelativePanel.AlignBottomWithPanel="True"
                        Text="{TemplateBinding Content}"
                        Foreground="{TemplateBinding Foreground}" />

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <!-- Normal状态无需额外动画 -->
                            <VisualState x:Name="Normal" />
                            
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="MyPanel.Background" Value="Black" />
                                    <Setter Target="MyPanel.Foreground" Value="#00B7EB" />
                                </VisualState.Setters>
                                <!-- 使用悬停专属动画 -->
                                <Storyboard>
                                    <PointerOverThemeAnimation Storyboard.TargetName="MyPanel" />
                                </Storyboard>
                            </VisualState>

                            <!-- 补充Pressed状态，完善交互逻辑 -->
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="MyPanel" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </RelativePanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="75" />
    <Setter Property="Height" Value="45" />
</Style>

关键修改点说明 #

• 强制背景为Transparent：解决了指针事件无法捕获的核心问题，确保控件区域能响应鼠标悬停。
• 移除无效Setter：删掉了指向不存在的ContentPresenter的设置，避免逻辑干扰。
• 绑定Foreground到子元素：通过模板绑定统一管理图标和文字的颜色，悬停时只需修改根元素的Foreground即可同步所有子元素。
• 替换动画类型：用PointerOverThemeAnimation替代错误的PointerUpThemeAnimation，匹配悬停状态的交互反馈。

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