IsMouseOver 仅当光标位于按钮的 'bottom' 部分时触发 returns true

Question

我是 WPF 的新手，我正在尝试制作一个自定义按钮，当您将鼠标悬停在该按钮上时，它会更改为另一种指定的颜色。我这样做并取得了部分成功；唯一的问题是只有按钮的底部才会真正触发颜色变化。

红色高亮显示区域是大致的命中框。（不是红色长条，那只是装饰）

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

你的解决方案对我来说似乎很好。我在我的 vs 上尝试过同样的事情，一切似乎都很好。也许还有其他东西与包含这些按钮的容器相关联，或者可能与图像本身有关。您可以尝试在 controlTemplate 内设置边框名称并在触发器内设置 TargetName 吗？想知道这是否有帮助

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

Answer 2

我发现这是 WPF 和 WindowChrome class 调试功能的一个小问题。这是通过在样式中添加以下内容来解决的：

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

IsMouseOver 仅当光标位于按钮的 'bottom' 部分时触发 returns true

IsMouseOver trigger only returns true when the cursor is over the 'bottom' part of the button

wpf

xaml

wpf-style

ismouseover