title: Define a Style for a Button when Hover in a universal App
body: <p>I have tried to define this style when I hover on each button in the designer,like this:</p>
  
  <p><a href="https://i.stack.imgur.com/gxjU5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gxjU5.png" alt="enter image description here"></a></p>
  
  <p>but I get this result when I hover on each Button with my code:<br>
  <a href="https://i.stack.imgur.com/MxYFO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MxYFO.png" alt="enter image description here"></a><br>
  <a href="https://i.stack.imgur.com/ZxfnC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZxfnC.png" alt="enter image description here"></a></p>
  
  <p>this is my code,I have defined a style for the Button:</p>
  
  <pre><code>&lt;Style x:Key="ButtontopStyle1" TargetType="Button"&gt;
      &lt;Setter Property="Foreground" Value="#e6e6e6"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="Button"&gt;
                  &lt;Grid&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="Normal"/&gt;
                              &lt;VisualState x:Name="PointerOver"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button1" /&gt;
                                      &lt;ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button11" /&gt;
                                      &lt;ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content11" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Pressed"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button1" /&gt;
                                      &lt;ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content11" /&gt;
  
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;Grid&gt;
                          &lt;Grid.ColumnDefinitions&gt;
                              &lt;ColumnDefinition Width="*"/&gt;
                              &lt;ColumnDefinition Width="Auto"/&gt;
                          &lt;/Grid.ColumnDefinitions&gt;
  
                          &lt;Grid Grid.Column="0"&gt;
                          &lt;ContentPresenter x:Name="Content11" /&gt;
                          &lt;Rectangle x:Name="Button1" Stroke="Transparent" Fill="Transparent" Margin="0"  Width="auto"/&gt;
                          &lt;/Grid&gt;
                              &lt;Rectangle x:Name="Button11" Stroke="Transparent" Fill="Transparent" Margin="0" Grid.Column="1" Width="5"/&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>then I have apply it in my button like that:</p>
  
  <pre><code>&lt;StackPanel Orientation="Vertical" Margin="0" &gt;
      &lt;Button  Background="Transparent" Content="Resultats" FontSize="18" Foreground="#727271"  x:Name="res" Style="{Binding Source={StaticResource ButtontopStyle1}}" /&gt;
      &lt;StackPanel x:Name="stackVisible" Orientation="Vertical" &gt;
          &lt;Button  Background="Transparent" Content="Tous les résultats" FontSize="16"  Foreground="#727271"   x:Name="ttres" Style="{Binding Source={StaticResource ButtontopStyle1}}"
          &lt;Button Background="Transparent" Content="Recherches Avancées" FontSize="16"  Foreground="#727271"  x:Name="rechavan"  Style="{Binding Source={StaticResource ButtontopStyle1}}" /&gt;
      &lt;/StackPanel&gt;
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p>as you can see,when I hover,I have a rectangle that hides the text of the Button</p>
  
  <p>How can I modify my code to be like the result that I want?</p>