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

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 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一个绑定中Background.

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

风格设置Background为透明的东西,但它甚至从未使用过Template,这样Border会使整个区域受到重击测试.

Answer 2

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

如果您正在定义自己的模板,如上例所示,则您正在更改元素的可视树.在上面的示例中应用Style="{DynamicResource EmptyButtonStyle}"它变为:

Button
  |
ContentPresenter

但是,如果您查看标准按钮的可视树(可以在Visual Studio中执行此操作),它看起来像这样:

Button
  |
ButtonChrome
  |
ContentPresenter

因此,在样式按钮中,没有任何东西ContentPresenter可以点击,如果内容位于"中间",则周围区域将保持完全为空.我们必须添加一个元素来取代这个地方:

你可以用它做<Border>(我认为这是最好的,因为边境是一个轻量级的元素,我想),或者一些其他的元素,我想<Grid>和<DockPanel>两者合作.

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

编辑:此处评论中回答的最后一点图像按钮仅在单击图像时响应,而不是按钮内部的区域