Windows 8 button disappearing when mouse over

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