图像按钮仅在单击图像而不是按钮内部区域时响应 [英] Image Button only responds when clicking on the image and not the area around inside the button

问题描述

我正在使用以下按钮样式，它去掉了边框并制作了透明背景来制作我的图像按钮:

I'm using the following button style which takes away the borders and makes a transparent background to make my image buttons:

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

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

The problem now is that the clickable area is confined to the image regardless of how big the actual button is:

我的按钮代码:

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

问题:如何让整个按钮区域对点击做出反应?我想让它保持透明且没有边界，就像现在一样.

Question: how do I make the whole button area react to the click? I want to keep it transparent and without border as it is now.

推荐答案

你可以用绑定的 Background 将 Presenter 包装在 Border 中.

You could wrap the presenter in a Border with a bound Background.

<ControlTemplate TargetType="{x:Type Button}">
     <Border Background="{TemplateBinding Background}">
          <!-- ContentPresenter here -->
     </Border>
</ControlTemplate>

样式将 Background 设置为透明的，但它甚至从未在 Template 中使用过，这样 Border 将使整个区域命中测试.

The style sets the Background to something transparent but it was never even used in the Template, this way the Border will make the whole area hit-test.

这篇关于图像按钮仅在单击图像而不是按钮内部区域时响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！