title: Strange problem with IsMouseOver on button in ListBoxItem
body: <p>I have a template for my list box item. It includes an image button. The button changes images when you hover. The problem I'm having is it's adding a weird artifact to the button when I hover. This ONLY happens though if it's in a ListBoxItem. If I put the button on the main canvas, it works fine. </p>
  
  <p>Here is the image in the normal state:</p>
  
  <p><img src="https://i.imgur.com/VApn1.jpg" alt="alt text"></p>
  
  <p>Here is the image in the hover state: Notice the 2 white lines on the top and right edges.</p>
  
  <p><img src="https://i.imgur.com/zRWQK.jpg" alt="alt text"></p>
  
  <p>What's even more strange, is when you move the mouse off, and it reverts the image, the artifact stays:</p>
  
  <p><img src="https://i.imgur.com/5u05r.jpg" alt="alt text"></p>
  
  <p>Here is the code for my button. I've tried playing with every background brush (both the button, the listbox item, etc.) </p>
  
  <pre><code>    &lt;Style x:Key="RedXButton" TargetType="{x:Type Button}"&gt;
          &lt;Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/&gt;
          &lt;Setter Property="Background" Value="Black"/&gt;
          &lt;Setter Property="BorderBrush" Value="Transparent"/&gt;
          &lt;Setter Property="BorderThickness" Value="0"/&gt;
          &lt;Setter Property="Foreground" Value="Transparent"/&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                      &lt;Image Width="19" Height="18"&gt;
                              &lt;Image.Style&gt;
                                  &lt;Style TargetType="{x:Type Image}"&gt;
                                      &lt;Setter Property="Source" Value="Views/Images/RedX.png"/&gt;
                                          &lt;Style.Triggers&gt;
                                              &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                                                  &lt;Setter Property="Source" Value="Views/Images/RedXHover.png"/&gt;
                                              &lt;/Trigger&gt;
                                          &lt;/Style.Triggers&gt;
                                  &lt;/Style&gt;
                              &lt;/Image.Style&gt;
                          &lt;/Image&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsKeyboardFocused" Value="true"/&gt;
                          &lt;Trigger Property="ToggleButton.IsChecked" Value="true"/&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
          &lt;Setter Property="Width" Value="19"/&gt;
          &lt;Setter Property="Height" Value="18"/&gt;
          &lt;Setter Property="OpacityMask" Value="{x:Null}"/&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>My listbox item template:</p>
  
  <pre><code>&lt;Canvas x:Name="LayoutRoot"&gt;
          &lt;Image x:Name="image" Source="/Views/Images/FileGradient.png" Width="375" Height="43"/&gt;
          &lt;Button x:Name="RedX" Style="{DynamicResource RedXButton}" Command="{Binding RemoveCommand}" Canvas.Left="11" Canvas.Top="13" Width="19" Height="18" /&gt;
      &lt;/Canvas&gt;
  </code></pre>