Problème étrange avec IsMouseOver sur le bouton dans ListBoxItem

Question

J'ai un modèle pour mon élément de zone de liste. Il comprend un bouton d'image. Le bouton change d'image lorsque vous passez la souris. Le problème que j'ai est d'ajouter un artefact bizarre au bouton quand je planerai. Cela arrive seulement si c'est dans un ListBoxItem. Si je mets le bouton sur la toile principale, ça fonctionne bien.

Voici l'image à l'état normal:

est ici l'image dans l'état de vol stationnaire: Remarquez les 2 lignes blanches sur les bords supérieur et droit.

Ce qui est encore plus étrange, est lorsque vous déplacez la souris hors tension, et il Ramène l'image, l'artefact reste:

Voici le code pour mon bouton. Je l'ai essayé de jouer avec chaque brosse de fond (à la fois sur le bouton, l'élément listbox, etc.)

<Style x:Key="RedXButton" TargetType="{x:Type Button}"> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> 
     <Setter Property="Background" Value="Black"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="0"/> 
     <Setter Property="Foreground" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Image Width="19" Height="18"> 
          <Image.Style> 
           <Style TargetType="{x:Type Image}"> 
            <Setter Property="Source" Value="Views/Images/RedX.png"/> 
             <Style.Triggers> 
              <Trigger Property="IsMouseOver" Value="True"> 
               <Setter Property="Source" Value="Views/Images/RedXHover.png"/> 
              </Trigger> 
             </Style.Triggers> 
           </Style> 
          </Image.Style> 
         </Image> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsKeyboardFocused" Value="true"/> 
         <Trigger Property="ToggleButton.IsChecked" Value="true"/> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Width" Value="19"/> 
     <Setter Property="Height" Value="18"/> 
     <Setter Property="OpacityMask" Value="{x:Null}"/> 
    </Style> 

Mon modèle d'élément listbox:

<Canvas x:Name="LayoutRoot"> 
     <Image x:Name="image" Source="/Views/Images/FileGradient.png" Width="375" Height="43"/> 
     <Button x:Name="RedX" Style="{DynamicResource RedXButton}" Command="{Binding RemoveCommand}" Canvas.Left="11" Canvas.Top="13" Width="19" Height="18" /> 
    </Canvas> 

Answer 1

Il a fini par être des styles multiples pour différents éléments en conflit. Je ne suis pas sûr de ce que le correctif était. J'ai simplement simplifié tous les styles et recréé certains contrôles, et ça a disparu. Malheureusement, je ne peux pas en ajouter plus, car je ne suis pas sûr de ce qui l'a finalement réglé.

Answer 2

Juste une pensée - essayez de définir la propriété SnapsToDevicePixels sur votre modèle d'élément de liste de sélection à "vrai". Il pourrait également être utile de le définir sur le style de bouton:

<Setter Property="SnapsToDevicePixels" Value="true"/>