Странная проблема с IsMouseOver на кнопке в ListBoxItem

Question

У меня есть шаблон для элемента моего списка.Он включает в себя кнопку с изображением.Кнопка изменяет изображения при наведении курсора мыши.Проблема, с которой я сталкиваюсь, заключается в добавлении странного артефакта к кнопке при наведении курсора мыши.Однако это происходит ТОЛЬКО в том случае, если он находится в элементе ListBoxItem .Если я помещу кнопку на основной холст, она будет работать нормально.

Вот изображение в нормальном состоянии:

Вот изображение в состоянии наведения:Обратите внимание на 2 белые линии по верхнему и правому краям.

Что еще более странно, так это то, что когда вы убираете курсор мыши и он меняет изображение, артефакт остается:

Вот код для моей кнопки.Я пробовал играть с каждой фоновой кистью (как с кнопкой, так и с элементом списка и т.д.).

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

Шаблон элемента моего списка:

<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

В итоге получилось несколько конфликтующих стилей для разных элементов.Я не уверен, в чем на самом деле заключалось исправление.Я просто упростил все стили и заново создал некоторые элементы управления, и все исчезло.К сожалению, я не могу добавить больше ничего сверх этого, так как я не уверен, что в конечном итоге это исправило.

Answer 2

Просто мысль - попробуйте установить SnapsToDevicePixels присвоите шаблону элемента вашего списка значение "true".Возможно, также стоит установить его в стиле кнопки:

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