Windows 8 button disappearing when mouse over - xaml

Question

I have a settings control as follows (I promise I didn't really call my buttons button_1 and button_2):
<UserControl
x:Class="App1.SettingsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="646">
<Border BorderBrush="#FF590151" BorderThickness="1">
<Grid Background="White" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Aqua" Grid.Row="0">
<Grid Margin="40,20,17,13">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="50" />
</TransitionCollection>
</Grid.Transitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Click="Button_Click_1" Margin="0,3,0,0" Grid.Column="0"
HorizontalAlignment="Left" Style="{StaticResource BackButtonStyle}"/>
<TextBlock Margin="10,5,0,0" Grid.Column="1" FontFamily="Segoe UI"
FontWeight="SemiLight" FontSize="24.6667" Text="Settings" HorizontalAlignment="Left" />
<Image Source="/Assets/icon.png" HorizontalAlignment="Right" Grid.Column="2" Margin="0,0,6,0" />
</Grid>
</Grid>
<Grid Grid.Row="1" Margin="40,24,23,0" VerticalAlignment="Top">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="120" />
</TransitionCollection>
</Grid.Transitions>
<Button x:Name="button2" Foreground="Black" BorderThickness="1"
Click="button2_Click">Reset Difficulty</Button>
</Grid>
</Grid>
</Border>
</UserControl>
It works fine, but when I hover over button2 it disappears. Why is this?

Answer 1

You need to customize the PointerOver visual state of button template and apply custom style to button.
Check out button styles and templates
Default one is
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
To eliminate effect simply comment out it.
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
There one more way is to change ButtonPointerOverForegroundThemeBrush resource but it will be effected to whole project.
<SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="Black" />