IsMouseOver 触发器仅在光标位于按钮的“底部”部分时返回 true

Question

I am fairly new to WPF, and I am trying to make a custom button where it changes to another specified colour when you hover over it. I have done this with partial success; the only problem is that only the bottom part of the button actually triggers the colour change.

Red area is the approximate hitbox. (not the long red strip, that's just decoration)

<!-- Button Markup-->
<Button Margin="4,0,4,0" >
    <Image Source="{StaticResource closeImg}"></Image>
</Button>

<!-- Button style -->

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#FF2B2B2B"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="Width" Value="28px"/>
    <Setter Property="Height" Value="28px"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

Answer 1

I've found that this was a slight quirk with the debug function with WPF and the WindowChrome class. This is fixed by adding the following to the style:

<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"></Setter>

Answer 2

your solution seems to be good to me. I've tried the same thing on my vs and everything seems to be just fine. Perhaps there's something else connected with container that holds these buttons, or perhpas something with the image itself. Can you try to set the name for the border inside of a controlTemplate and set the TargetName inside of a trigger? Wonder if that could help

<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF2B2B2B"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Width" Value="28px"/>
<Setter Property="Height" Value="28px"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="Bd" Background="{TemplateBinding Background}">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Bd" Property="Background" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>