UWP 按钮在鼠标悬停时更改颜色

Question

我正在尝试创建一个 UWP 按钮，当鼠标指针悬停在它上面时，它将改变背景颜色。我遇到的麻烦是，默认情况下，它似乎已经这样做了，但不是我想要的颜色。当我将鼠标悬停在我的红色按钮上时，它会变成默认灰色，然后当我鼠标移出时又变回来。我用 C# 编写了代码，试图让它在我悬停在它上面时变成蓝色

private void button_PointerEntered_1(object sender, PointerRoutedEventArgs e)
    {
        button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 0, 255));
    }

    private void button_PointerExited_1(object sender, PointerRoutedEventArgs e)
    {
        button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 0, 0));
    }

下面是按钮的 XAML 代码

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="button" 
                Content="Button" 
                HorizontalAlignment="Left" 
                Margin="417,188,0,0" 
                VerticalAlignment="Top" 
                Height="230" 
                Width="461" 
                FontSize="72" 
                ManipulationMode="None" 
                PointerEntered="button_PointerEntered_1" 
                PointerExited="button_PointerExited_1">
            <Button.Foreground>
                <SolidColorBrush Color="Black"/>
            </Button.Foreground>
            <Button.Background>
                <SolidColorBrush Color="Red"/>
            </Button.Background>
        </Button>

    </Grid>

Answer 1

一种可能但更复杂的方法是覆盖Button 样式：

<Page.Resources>
    <Style TargetType="Button" x:Key="CustomButtonStyle">
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
        <Setter Property="Padding" Value="8,4,8,4" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <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="RootGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Orange" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="gridRoot">

    <Button Content="stackoverflow" Style="{StaticResource CustomButtonStyle}"/>
</Grid>

查看PointerOver 状态以及我如何设置Background 属性。

Answer 2

您可以将一个按钮拖到您的网格并左键单击它选择编辑项。然后您将看到样式默认为@Andrii 答案。如果您想更改鼠标悬停颜色，您可以更改代码@987654321 @

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
    <DiscreteObjectKeyFrame KeyTime="0" Value="The new Color" />

您可以将The new Color 更改为您的颜色。

Answer 3

2018 年更新答案

实现它的最简单方法是覆盖按钮字典中的资源（对于您想要的主题）
您可以更改名为 Button<Property>PointerOver 的资源键的值以使效果生效：

<Button Background="Red" Foreground="Black"> <!-- These are only applied when your button is not being hovered-->
    <Button.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Red"/>
                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Black"/>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="Red"/>
                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Black"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Button.Resources>
</Button>

Here is an example on how this is done 在 Microsoft 官方文档中获得以下结果：

和here is the list of resources that you can override 在一个按钮中

Answer 4

作为对@Treycos 更新答案的补充，您还可以使用Fluent XAML Theme Editor（也可在Store 上使用），它允许您定义调色板并为您生成大部分系统资源。