图像按钮仅在单击图像时响应，而不响应按钮内部的区域

Question

我正在使用以下按钮样式来消除边框并使透明背景形成我的图像按钮：

  <Style x:Key="EmptyButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#00000000"/>
    <Setter Property="BorderBrush" Value="#00000000"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <ContentPresenter 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    RecognizesAccessKey="True" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

风格来自以下答案： WPF button with image of a circle

现在的问题是无论实际按钮有多大，可点击区域都局限于图像：

我的按钮代码：

<Button Name="n02" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Style="{DynamicResource EmptyButtonStyle}" Canvas.Left="308" Canvas.Top="157" Height="106" Width="120">
        <Image Source="boto_face_off.PNG" Height="61" Width="59" />
    </Button>

问题：如何让整个按钮区域对点击作出反应？我想让它保持透明，没有现在的边界。

Answer 1

您可以使用绑定Border的{​​{1}}包装演示者。

Background

该样式将<ControlTemplate TargetType="{x:Type Button}"> <Border Background="{TemplateBinding Background}"> <!-- ContentPresenter here --> </Border> </ControlTemplate> 设置为透明，但在Background中从未使用过，Template这样会使整个区域都进行测试。

Answer 2

在调查问题数小时之后，只需在上面的答案中添加一些信息。

如果您在上面的示例中定义自己的模板，则需要更改元素的可视树。在上面的示例中，应用Style="{DynamicResource EmptyButtonStyle}"它变为：

Button
  |
ContentPresenter

但是如果你看一下标准按钮的可视树（你可以在Visual Studio中这样做），它看起来像这样：

Button
  |
ButtonChrome
  |
ContentPresenter

因此，在样式按钮中，ContentPresenter周围没有任何内容可供点击，如果内容位于“中间”，则周围区域将保持完全为空。我们必须添加一个元素来取代这个地方：

你可以使用<Border>（我认为这是最好的，因为我认为Border是一个轻量级元素）或其他一些元素，我尝试<Grid>和<DockPanel>并且都工作了

我唯一不理解的是为什么你需要明确地将背景设置为透明的东西，只是将它留下来不产生可点击的区域。

编辑：最后一点在此处的评论中回答Image Button only responds when clicking on the image and not the area around inside the button

Answer 3

我有Button，其内容为包含图像和TextBlock的网格

我通过将透明背景添加到网格来固定可点击区域

Background="#00000000"