How to extend WPF hit testing zone for a Path object

Question

Wpf hit testing is pretty good but the only method I found to extend the hit zone is to put a transparent padding area around your object. I can't find any method to add a transparent area arround a Path object. The path is very thin and I would like to enable hit testing if the user clicks near the path. I can't find any method to extend the path object with a transparent area like the image below : alt text http://img175.imageshack.us/img175/6741/linepadding.png

I tried to used a partially transparent stroke brush but I ran into the problem described here : How can I draw a "soft" line in WPF (presumably using a LinearGradientBrush)?

I also tried to put an adorner over my line but because of WPF anti-aliasing algorithms, the position is way off when I zoom in my canvas and interfere with other objects hit-testing in a bad way.

Any suggestion to extend the hit testing zone would be highly appreciated.

Thanks, Kumar

Caseose

Answer 1

Path.Data is a geometry object. The Geometry class has several methods that can help you hit test with tolerance:

GetFlattenedPathGeometry(Double, ToleranceType)
GetOutlinedPathGeometry(Double, ToleranceType)
GetRenderBounds(Pen, Double, ToleranceType)

I think GetRenderBounds will work best for you.

Once you have the geometry (plus a little width) you can call

geometry.FillContains(Point, Double, ToleranceType)

or

geometry.StrokeContains(Pen, Point, Double, ToleranceType)

Out of all of that you should tune the desired hit from your hit test;

Isochronism

Answer 2

You can wrap the Path inside a transparent Border.

Guanajuato

Answer 3

In WPF you can create another path with its geometry databound to the first (using Element Binding), but with transparent brush and increased thickness.

Something more or less like this:

<Path x:Name="backPath" Data="{Binding Data, ElementName=mainPath}" StrokeThickness="10" Stroke="Transparent"/>
<Path x:Name="mainPath" Data="{Binding DataFromViewModel}" StrokeThickness="1" Stroke="Red"/>

Note that the main path comes after in XAML, so that it is rendered on top.

Fireeater