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

我发现使用WPF和WindowChrome类的调试功能有点古怪。通过在样式中添加以下内容可以解决此问题：

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

Answer 2

您的解决方案对我似乎很好。我已经在我的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>

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

2 个答案: