Image Button only responds when clicking on the image and not the area around inside the button

Question

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>

The Style is from the following answer: WPF button with image of a circle

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

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

Answer 1

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.

Answer 2

Just adding some info to the answer above after investigating the issue for hours.

If you are defining your own template as in the example above you are changing the visual tree of the element. In the above example applying the Style="{DynamicResource EmptyButtonStyle}" it becomes:

Button
  |
ContentPresenter

But if you look at the visual tree of a standard button(you can do this in Visual Studio) it looks like this:

Button
  |
ButtonChrome
  |
ContentPresenter

So in the styled button there is nothing around the ContentPresenter to be clicked on, and if the Content is in the "middle" the surrounding area will be left totally empty. We have to add an element to take this place:

You can do it with a <Border>(I think this is best because Border is a lightweight element I suppose) or some other element, I tried <Grid> and <DockPanel> and both worked.

The only thing I don't understand is why you need to explicitly set the background to something transparent, just leaving it out will not produce a clickable area.

Edit: Last point answered in the comments here Image Button only responds when clicking on the image and not the area around inside the button

Answer 3

I have Button where content is Grid containing Image and TextBlock

I fixed clickable area by adding Transparent Background to grid

Background="#00000000"