Question

我有自定义按钮模板。 Button包含canvas元素，canvas包含两行（cross）。

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

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

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

这是我的按钮样式：

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

Answer 1

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

我只需添加透明边框背景。

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

这么简单！

如何让Button在悬停时对整个区域做出反应

1 个答案: