WinUI3自定义Button悬浮与聚焦时背景色修改方案咨询

要实现类似AppBarButton的醒目悬浮/焦点效果，你需要完整重写Button的ControlTemplate——默认Button的视觉状态是作用于模板内部的Border元素，仅在外部设置属性不会生效。

以下是修改后的完整自定义Button代码：

<Button
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="{x:Bind Width}"
    Height="{x:Bind Height}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <!-- 默认状态 -->
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                            </Storyboard>
                        </VisualState>
                        <!-- 鼠标悬浮/触摸悬停状态 -->
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                            </Storyboard>
                        </VisualState>
                        <!-- 按下状态 -->
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                            </Storyboard>
                        </VisualState>
                        <!-- 禁用状态 -->
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <!-- 键盘焦点状态 -->
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="PointerFocused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <!-- 核心背景Border -->
                <Border x:Name="BorderElement"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        />
                <!-- 内容容器 -->
                <ContentPresenter x:Name="ContentPresenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Padding="{TemplateBinding Padding}"
                                AutomationProperties.AccessibilityView="Raw"/>
                <!-- 焦点视觉元素 -->
                <Rectangle x:Name="FocusVisual"
                        Stroke="{ThemeResource SystemControlForegroundAltHighBrush}"
                        StrokeThickness="2"
                        Visibility="Collapsed"
                        IsHitTestVisible="False"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>

    <!-- 你的自定义内容 -->
    <StackPanel
        Orientation="Vertical"
        VerticalAlignment="Center"
        HorizontalAlignment="Center">
        <FontIcon
            VerticalAlignment="Center"
            FontFamily="{StaticResource SymbolThemeFontFamily}"
            Glyph="{x:Bind Glyph}"
            FontSize="{x:Bind IconSize}" />
        <TextBlock
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Margin="0,10,0,0"
            Text="{x:Bind Label}"
            FontSize="{x:Bind FontSize}" />
    </StackPanel>
</Button>

关键说明： #

• 重写ControlTemplate后，视觉状态直接作用于模板内的BorderElement，这是Button背景色的核心载体
• 使用WinUI内置的主题资源SystemControlHighlightListLowBrush，和AppBarButton的悬浮背景色一致，同时适配浅色/深色主题
• FocusStates组中的Focused状态同样修改BorderElement的背景，确保Tab键聚焦时也有醒目效果
• 保留了默认Button的交互动画（PointerUp/PointerDown），保证体验一致性

额外优化建议： #

• 如果需要自定义背景色，可以替换主题资源为具体颜色值，比如#E0E0E0（浅色主题悬浮色）
• 可以调整BorderElement的CornerRadius，让按钮和AppBarButton的圆角风格统一

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