Search code examples
c#wpfxamlhittest

Change the hittest area

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.

Solution

  • 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.