图像按钮只有约在图像上，而不是区域单击按钮内部时响应 [英] 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>

样式是从以下答案：
<一href=\"http://stackoverflow.com/questions/3914208/wpf-button-with-image-of-a-circle/3915012#3915012\">WPF用圆圈的图像按钮

现在的问题是，可点击区域被限制在图像不顾实际按钮有多大：

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

我的按钮code：

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

推荐答案

您可以包装在presenter一个边框与绑定背景。

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>

的样式设置背景来的东西透明的，但它从来没有，即使在使用了模板，这种方式边框将使整个区域点击测试。

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