Change the hittest area

Question

Imagine I have this ellipse applied to ControlTemplate of an Style. (e.g.: this will be used for thumb of slider)

<Ellipse x:Name="Ellipse" 
         Fill="#C0FFFFFF"
         Stroke="{StaticResource SpecialColor}"
         StrokeThickness="2"/>

Now as soon as mouse comes in contact with this ellipse this element gets captured by mouse. How can I change collision geometry? Is there a XAML-only way to do this?

Let's say I want to make collision area smaller so when mouse is at middle of ellipse it captures it.

Or maybe I want to make collision area bigger than ellipse size so when mouse is near to ellipse it captures it.

The easiest way (XAML-only) would be to place a slightly larger (or smaller) ellipse with `Fill="Transparent"` over it. Transparent (as opposed to null) does count for hit-testing. — Manfred Radlwimmer, Jan 20 '17 at 08:05
nice opinion, to place dummy ellipse being larger and transparent. but what about ellipse being smaller? if I fill outer ellipse with some brush it will count for hit testing — M.kazem Akhgary, Jan 20 '17 at 08:16
As Erno pointed out in his answer, you would have to handle mouse events on the transparent ellipse. Think of your current ellipse as a decorator and the transparent one as the "actual" one. — Manfred Radlwimmer, Jan 20 '17 at 08:18

score 3 · Accepted Answer · answered Jan 20 '17 at 08:16

These solutions do not change the hit test of the ellipse but do provide a XAML solution as much as possible.

Making it bigger can be done by wrapping the Ellipse in a container (Grid?) and assigning a Transparent background to the container.

<Grid Background="Transparent">
    <Ellipse Margin="5" ... />
</Grid>

Making it smaller can be done by adding a smaller geometry on top, again with a transparent background and disabling the hit test on the ellipse (IsHitTestVisible = "False"

<Grid>
    <Ellipse IsHitTestVisible="False" ... />
    <Grid Background="Transparent" Width="5" Height="5" />
</Grid>

Important:

you need to set the Background to transparent explicitly.
both solutions do not change the hit test of the Ellipse but use a 'decoy' so you would have to implement events that handle clicks etc on the decoy and have them act on the container.

Change the hittest area

1 Answers1