مشكلة غريبة مع ISMOUSTOVER على زر ListBoxItem

Question

لدي قالب لعنصر مربع القائمة الخاص بي. يتضمن زر صورة. يغير الزر الصور عند التحويم. المشكلة التي أواجهها هي إضافة قطعة أثرية غريبة إلى الزر عندما أحرم. يحدث هذا فقط إذا كان في قائمة ListBoxitem. إذا وضعت الزر على قماش رئيسي، فإنه يعمل بشكل جيد.

هنا هي الصورة في الحالة الطبيعية:

هنا هي الصورة في حالة التحويم: لاحظ الخطوط البيضاء 2 على الحواف الأعلى واليمين.

ما هو أكثر غرابة، هو عند تحريك الماوس قبالة، ويعيد الصورة، يبقى Artifact:

هنا هو رمز الزر الخاص بي. لقد حاولت اللعب مع كل فرشاة خلفية (كل من الزر، عنصر ListBox، إلخ)

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

قوالب عنصر LINDBOX الخاص بي:

<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 خاصية على قالب IndBox الخاص بك إلى "صحيح". قد يستحق أيضا إعداده على نمط الزر:

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