How does one increase the hit testing radius on a rectangle in WPF?

Question

Let's say I have a rectangle like this:

<Rectangle Grid.Column="1"
           Stroke="Red"
           StrokeDashArray="4.0 4.0"
           StrokeThickness="{Binding Path=CurrentThickness}"
           Visibility="{Binding Path=VisibleRectangle,
                                Converter={StaticResource VisibilityConverter}}"
           MouseUp="HandleMouseUp" />

This works for doing hit testing on the rectangle itself for the MouseUp event. However, the typical width of the rectangle is 1px wide, making clicking on the edge of the rectangle difficult. I would like to make the "effective click border size" for the Rectangle's stroke to be larger than the visual appearance of that stroke. (For instance, let's say the rectangle is drawn as 1px wide, but the mouse click region is actually 3px wide)

Is such a thing possible, or am I forced to increase the thickness of the Rectangle's stroke?

score 2 · Accepted Answer · answered Oct 07 '13 at 23:08

2

Hacky solution:

put a "transparent" rectangle in the same place, and make your rectangle IsHitTestVisible="False"

<Rectangle x:Name="Clickable"
           Grid.Column="1"
           MouseUp="HandleMouseUp"
           Fill="#01FFFFFF"/>

<Rectangle Grid.Column="1"
           Stroke="Red"
           StrokeDashArray="4.0 4.0"
           StrokeThickness="{Binding Path=CurrentThickness}"
           IsHitTestVisible="False"
           Visibility="{Binding Path=VisibleRectangle,
                                Converter={StaticResource VisibilityConverter}}"/>

answered Oct 07 '13 at 23:08

Federico Berasategui

43,562
11
100
154

+1. You don't actually need to make the display rectangle hit test invisible so long as the clickable rectangle is drawn on top. (e.g. Zorder or reversing the order of the rectangles in XAML is enough) – Billy ONeal Oct 08 '13 at 00:19
Honestly, I don't think this is a hacky solution at all. The area we want hit test visible is a rectangle, so it makes sense that we would use rectangle for that. Have a checkmark. (I used Transparent instead of `#01FFFFFF`) – Billy ONeal Oct 08 '13 at 00:55

score 0 · Answer 2 · answered Oct 08 '13 at 00:59

This is what I ended up using, building on HighCore's answer. Note the margin used to move the displayed rectangle into the middle of the hit testing rectangle:

<!-- This border is displayed when XXX. -->
<!-- Note that the margin moves it into the middle of the hit testing
     rectangle below. -->
<Rectangle Stroke="Red"
           StrokeDashArray="4.0 4.0"
           Margin="1"
           StrokeThickness="{Binding Path=CurrentThickness}"
           Visibility="{Binding Path=VisibleRectangle,
                                Converter={StaticResource VisibilityConverter}}" />

<!-- This border handles hit testing when XXX. -->
<Rectangle Panel.ZIndex="10"
           StrokeThickness="3"
           Stroke="Transparent"
           MouseUp="HandleMouseUp"
           Visibility="{Binding Path=VisibleRectangle,
                                Converter={StaticResource VisibilityConverter}}" />

How does one increase the hit testing radius on a rectangle in WPF?

2 Answers2