如何在XAML中实现鼠标悬停时更改按钮背景颜色？

Looks like you’re working on a UWP app and want to customize your button’s background when the mouse hovers over it. Here’s how you can extend your existing Button style to add that functionality seamlessly:

You’ll need to add a ControlTemplate to your Button style, and use the VisualStateManager to handle the PointerOver state (this is the trigger for when the mouse is hovering over the button). Here’s the complete updated style code that fits into your existing resources:

<Application x:Class="TiendaVirtual.App" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:local="using:TiendaVirtual" 
             xmlns:viewModel="using:TiendaVirtual.ViewModel" 
             RequestedTheme="Light">
    <Application.Resources>
        <viewModel:ArticleViewModel x:Key="ArticleViewModel"></viewModel:ArticleViewModel>
        
        <Style TargetType="Button">
            <!-- Default button appearance -->
            <Setter Property="Background" Value="#E5E5E5"/>
            <Setter Property="Foreground" Value="#212121"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="#CCCCCC"/>
            <Setter Property="Padding" Value="12,8"/>
            
            <!-- Custom template with hover state -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <!-- Normal state (no interaction) -->
                                    <VisualState x:Name="Normal"/>
                                    
                                    <!-- Hover state: change background here -->
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <!-- Instant color change; add Duration for smooth transition -->
                                            <ColorAnimation Duration="0" 
                                                           To="#BDBDBD" 
                                                           Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
                                                           Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    
                                    <!-- Optional: Add pressed state for full interactivity -->
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" 
                                                           To="#9E9E9E" 
                                                           Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
                                                           Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            
                            <!-- Ensure button content (text/icons) displays correctly -->
                            <ContentPresenter x:Name="ContentPresenter" 
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Margin="{TemplateBinding Padding}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

Quick Notes: #

• Adjust the To value in the ColorAnimation to any hex color you want for the hover state. If you prefer a smooth fade, add a Duration like Duration="0:0:0.2" for a 200ms transition.
• If you want to use a gradient or custom brush for hover, replace the ColorAnimation with an ObjectAnimationUsingKeyFrames to swap the entire brush (define your custom brush in resources first).
• The ContentPresenter is critical to ensure your button’s text or icons appear as expected.

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