How to change the button's background when mouseover in UWP?

Question

Now I only want to change the button's background to #f5f5f5 when mouseover it.
WPF has a trigger function which can do it easily.
Whereas I heard that UWP has no trigger any more,but with other function instead,like this question:
Trigger element (XAML) is not supported in a UWP project

I did it with DataTriggerBehavior as the tutorial:

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

The programme can works successfully,but can't change the background.
Oh,my god.
I have tried the VisualState also,but I can't find a tutorial so I don't know how to use it.
What's more,I can hardly know why microsoft do not use trigger any more.
Would you please help me how to solve my problem?
Thanks a lot!

score 7 · Accepted Answer · answered Aug 08 '17 at 08:21

You can use triggers or behaviors from the XAML Behavior SDK but I'd go with a custom style for your Button instead. You simply change its color in the PointerOver state inside the default style.

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

Alternatively, you can override ButtonBackgroundPointerOver inside your App.xaml.

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

Thanks for help me again.I think I must learn more about the VisualState at once. — Melon NG, Aug 09 '17 at 07:27

score 2 · Answer 2 · edited Sep 29 '19 at 17:27

Change a button's hover over color on a page.

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

How to change the button's background when mouseover in UWP?

2 Answers2

Linked