WPF Button ControlTemplate with negative values gives wrong clickbox

Question

I have a button defined with a ControlTemplate like this:

<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="ButtonBase_OnClick">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Path Data="M-20,-60L-20,-20 -60,-20 -60,20 -20,20 -20,60 20,60 20,20 60,20 60,-20 20,-20 20,-60z">
                <Path.Style>
                    <Style TargetType="Path">
                        <Setter Property="Stroke" Value="Red" />
                        <Setter Property="Fill" Value="Blue" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="StrokeThickness" Value="2" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </ControlTemplate>
    </Button.Template>
</Button>

When I click anywhere but the bottom-right part of the + shape, ButtonBase_OnClick (and an ICommand for that matter) isn't triggered.

I eventually plan to use the Button in a Canvas centered around a certain location, which is why I need the negative values in the ControlTemplate.

How can I make it so ButtonBase_OnClick triggers while maintaining the same Shape in the ControlTemplate?

Edit:
I tried placing a Grid around the Path in my ControlTemplate as explained in WPF. Is it possible to do ellipse “rectangle bounds” hittest?, but that doesn't seem to trigger the Button's Click event.

Possible duplicate of [WPF. Is it possible to do ellipse "rectangle bounds" hittest?](https://stackoverflow.com/questions/39703613/wpf-is-it-possible-to-do-ellipse-rectangle-bounds-hittest) — Mat, Dec 22 '17 at 08:40
@Mat The issue isn't hittesting, it's that the hittest box is misplaced/misaligned, slapping a `Grid` doesn't route the click to the button. — ManIkWeet, Dec 22 '17 at 09:41

score 1 · Accepted Answer · answered Dec 22 '17 at 08:30

1

put your Path inside a Viewbox

<Viewbox Width="50" Height="50">
    <Path here...>
</Viewbox>

answered Dec 22 '17 at 08:30

Milan

616
5
11

I don't understand _why_ it works, but it works. I had to change `Width` and `Height` to `60` though. I don't understand why it isn't `120` (the total width/height of the `Path` shape), but that's a small detail. – ManIkWeet Dec 22 '17 at 09:53
With a bit more messing around it seems that replacing the `Viewbox` with a `Canvas` eliminates the need to give it a specific width/height altogether. – ManIkWeet Dec 22 '17 at 10:05
yeah. also, do try to set your data to and then play with negative margin values on the Button, rather than negative path data values. you might like it more. if it works.(you dont need viewbox/canvas then) – Milan Dec 22 '17 at 10:20

WPF Button ControlTemplate with negative values gives wrong clickbox

1 Answers1