Question

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.

Here is the image in the normal state:

Here is the image in the hover state: Notice the 2 white lines on the top and right edges.

What’s even more strange, is when you move the mouse off, and it reverts the image, the artifact stays:

Here is the code for my button. I’ve tried playing with every background brush (both the button, the listbox item, 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>

My listbox item template:

<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

It ended up being multiple styles for different elements conflicting. I’m not sure what the actual fix was. I just simplified all the styles and re-created some of the controls, and it went away. Unfortunately I can’t add any more beyond that, since I’m not sure what ultimately fixed it.