UWP 按钮在鼠标悬停时更改颜色 [英] UWP Button Changes Colors when Mouse hovers over

问题描述

我正在尝试创建一个 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(对象发送者，PointerRoutedEventArgs e){button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 0, 0));}

下面是按钮的 XAML 代码

<按钮 x:Name="按钮"内容="按钮"水平对齐=左"保证金="417,188,0,0"垂直对齐=顶部"高度=230"宽度=461"字体大小=72"操作模式=无"PointerEntered="button_PointerEntered_1"PointerExited="button_PointerExited_1"><按钮.前景><SolidColorBrush Color="黑色"/></Button.Foreground><按钮.背景><SolidColorBrush Color="红色"/></Button.Background></按钮></网格>

解决方案

2018 UPDATED ANSWER

实现它的最简单方法是覆盖按钮字典中的资源(对于您想要的主题)
您可以更改名为 ButtonPointerOver 的资源键的值以使效果起作用:

<!-- 这些仅在您的按钮未悬停时应用--><按钮.资源><资源字典><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></按钮>

和 这是您可以在按钮中覆盖的资源列表

I am trying to create a UWP button which will change background color when the mouse pointer hovers over it. The trouble I am having is that by default, it seems to already do this, but not to the color I want. When I hover over my button, which is red, it turns to the default grey and then back when I mouse out. I wrote code in C# to attempt to make it turn blue when I hover over it

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));
    }

Below is the XAML code for the button

<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>

解决方案

2018 UPDATED ANSWER

The easiest way to achieve it is to override the resources in your button's dictionaries (for the themes you want)
You can change the value of the resource keys named Button<Property>PointerOver for the effect to work:

<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 in the official Microsoft documentation for the following result :

And here is the list of resources that you can override in a button

这篇关于UWP 按钮在鼠标悬停时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！