在 UWP 中鼠标悬停时如何更改按钮的背景？答案

【问题标题】：How to change the button's background when mouseover in UWP?在 UWP 中鼠标悬停时如何更改按钮的背景？
【发布时间】：2018-01-15 16:35:17
【问题描述】：

现在我只想在鼠标悬停时将按钮的背景更改为#f5f5f5。
WPF有一个触发功能，可以轻松做到。
而我听说UWP已经没有触发器了，而是有其他功能，比如这个问题：
Trigger element (XAML) is not supported in a UWP project

我使用 DataTriggerBehavior 作为教程：

<ControlTemplate TargetType="Button" x:Key="ButtonControlTemplate">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Name="ButtonBorder" Background="{TemplateBinding Background}">                
                <ContentPresenter FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Foreground="{TemplateBinding Foreground}"></ContentPresenter>
            </Border>
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{Binding PointerMovedEvent, ElementName=ButtonBorder}" Value="true">
                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonBorder}" PropertyName="Background" Value="#f5f5f5" />
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </ControlTemplate>

程序可以运行成功，但不能改变背景。
天哪。
我也尝试过VisualState，但我找不到教程所以我不知道如何使用它。
而且，我几乎不知道为什么微软不再使用触发器了。
你能帮我解决我的问题吗？
非常感谢！

【问题讨论】：

标签： uwp uwp-xaml

【解决方案1】：

您可以使用XAML Behavior SDK 中的触发器或行为，但我会为您的Button 使用自定义样式。您只需在default style 内的PointerOver 状态下更改其颜色即可。

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
            <DiscreteObjectKeyFrame KeyTime="0" Value="#f5f5f5"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/>
        </ObjectAnimationUsingKeyFrames>
        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
    </Storyboard>
</VisualState>

或者，您可以在 App.xaml 中覆盖 ButtonBackgroundPointerOver。

<Application.Resources>
    <SolidColorBrush x:Key="ButtonBackgroundPointerOver">#f5f5f5</SolidColorBrush>
</Application.Resources>

【讨论】：

再次感谢您的帮助。我想我必须立即了解有关 VisualState 的更多信息。

【解决方案2】：

更改按钮悬停在页面上的颜色。

  <Button Background="#FF2C4763"   Click="HamburgerButton_Click" VerticalAlignment="Top" x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;">
     <Button.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Black"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
          </ResourceDictionary>
        </Button.Resources>
    </Button>

【讨论】：