如何使按钮在悬停时对整个区域做出反应答案

【问题标题】：How to make the Button to react whole area on hover如何使按钮在悬停时对整个区域做出反应
【发布时间】：2016-11-25 21:44:46
【问题描述】：

我有自定义按钮模板。按钮包含画布元素，画布包含两条线（十字）。

我想要实现的是在鼠标悬停在按钮上时更改按钮的背景颜色。但是，现在只有当鼠标悬停在按钮整个区域的一小部分的画布线元素上时，背景才会发生变化。

您能否告诉我，当鼠标悬停在按钮的任何区域上时，我可以做些什么来改变背景？

我可以在 XAML 编辑器中看到 Canvas 元素在整个按钮上被拉伸，但它仍然无法工作，直到鼠标悬停在 line 元素上。

这是我的按钮样式：

<Style x:Key="TitleButton" TargetType="{x:Type Button}">
    <Setter Property="Padding"          Value="3"/>
    <Setter Property="BorderThickness"  Value="0"/>
    <Setter Property="BorderBrush"      Value="Gray" />
    <Setter Property="Width"            Value="{StaticResource TitleButtonWidth}" />
    <Setter Property="Background"       Value="Transparent"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="Button">
            <Border Name="border">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Background" Value="LightSlateGray"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

还有我的按钮：

<Button x:Name="CloseButton" DockPanel.Dock="Right" Style="{StaticResource TitleButton}" Click="CloseButton_Click" >
    <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Line X1="15" X2="25" Y1="20" Y2="10" StrokeThickness="1" Stroke="Black"></Line>
        <Line X1="15" X2="25" Y1="10" Y2="20" StrokeThickness="1" Stroke="Black"></Line>
    </Canvas>
</Button>

【问题讨论】：

标签： c# wpf xaml wpf-style

【解决方案1】：

我在这个帖子中找到了解决方案：Mouseover effect on full stretch button

我要做的就是添加透明边框背景。

<Border Name="border" Background="Transparent">
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
         <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
     </Grid>
</Border>

这么简单！

【讨论】：