MouseEnter/MouseLeave takes into account hidden/clipped elements

03-28-2008 11:42 AM |

Hello,
I've found that when moving the cursor over a hidden/clipped region, the MouseEnter and MouseLeave events are fired.
Here's a simple sample :

<Grid x:Name="LayoutRoot" Background="White">
  <Grid.Resources>
    <SolidColorBrush x:Key="OutColor" Color="Red"/>
    <SolidColorBrush x:Key="OverColor" Color="Blue"/>
  </Grid.Resources>

  <!-- this rectangle is to display false hit test zone -->
  <Rectangle Width="200" Height="50" Margin="25,0,0,0"/>

  <!-- border to hide/clip it's inner content -->
  <Border Width="150" Height="150" Background="LightGray" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave">
    <!-- this rectangle has a width greater than the border -->
    <Rectangle x:Name="rect" Width="200" Height="50" Fill="{StaticResource OutColor}"/>
  </Border>
</Grid>

private void OnMouseEnter(object sender, MouseEventArgs e)
{
  this.rect.Fill = this.LayoutRoot.Resources["OverColor"] as Brush;
}

private void OnMouseLeave(object sender, MouseEventArgs e)
{
  this.rect.Fill = this.LayoutRoot.Resources["OutColor"] as Brush;
}

If you run the app, the red rectangle should go blue only when mouse is over the gray rectangle (border) but when moving the mouse over the green area which shows the red rectangle hidden/clipped area, the events are fired.
You can also add a clip region on the border with the same size as the border and the bug is still there.

Re: MouseEnter/MouseLeave takes into account hidden/clipped elements

04-10-2008 8:37 AM |

No reply ?