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