UWP Button Changes Colors when Mouse hovers over

Question

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>

Malcom

Answer 1

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

Retrench

Only downside is I only want one button to override the hover, not all my buttons. – Boorman

Using this solution as it is will only change the style of the button you put it in. If you ever want to apply it to multiple buttons you will have to use the Page's resources and not the Button's. For a local change, just override the <Button.Resources> – Retrench

Is there a way to do this programmatically? I need to change the ButtonBackgroundPointerOver color dynamically based on users actions. – Oler

Answer 2

A possible but more complicated approach is to override Button style:

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

Look at the PointerOver state and how I setup Background property.

Scorn

This is a ridiculous amount of code to change hover color. – Rasla

This is way too much code to simply change a color, you could just change the resource dictionnary values – Retrench

@Retrench if you have 3-4 different buttons on the screen - you have to use this solution – Scorn

You can always override the resource dictionnaries in the parent Page / UserControl to have the effect on all buttons, so no, you don't have to. This is shown in the MSDN doc linked below. – Retrench

your answer is better than mine, but your solution will not work in 2k16, because UWP sdk 10240 doesn't have ButtonForegroundPointerOver or ButtonBackgroundPointerOver brushes – Scorn

Adding the ref link: msdn.microsoft.com/en-us/library/windows/apps/mt299109.aspx – Socialite

Answer 3

You can drag an Button to your grid and left click it select the edit item .And then you will see the style default as @Andrii answer.If you want to change the mouse over color and you can change the code <VisualState x:Name="Pressed">

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

You can change the The new Color as your color.

Zia

Answer 4

As a complement to the updated answer by @Treycos, you can also use the Fluent XAML Theme Editor (available also on Store), which allows you to define colour palette and generates most of the system resources for you.

Turbit