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.

Swede

I am not so sure that your assertion of "this is the whole button area" is correct. I suspect that box is the border of you canvas- not the border of your functional button. Put a temporary red border on your button Style and see if it has the border you think it does. – Sylas

@Balam The border simply doesn't display regardless of color and thickness. But I see the button area on the designer and if I remove the "Template" from the Style the border appears and the whole area becomes clickable, as expected. Something the template does is messing with this. – Swede

I would take away all the setter properties and then add them back one at a time to see if one of them is breaking it. I don't get why you cannot display a border. I just use Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" for a button with no border. – Sylas

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.

Hudibrastic

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

@Mr.Roland: That is just the way it was implemented, makes the hit testing more flexible. – Hudibrastic

Yepp - All I needed was that Background property set! – Stenotype

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

Swede

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"

Cataclinal