Hit Testing in WPF

There’s a lot that can be written about hit testing in WPF so I won’t try to cover everything but there are some subtleties that bear mentioning. A common issue that I see people encounter is that fact that the default background for many elements is null and null (at least in terms of hit testing) is treated separately from Transparent. Take the following snippet for example.

<Page

  xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

  xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;>

  <Page.Resources>

      <Style TargetType=”{x:Type Grid}”>

          <Style.Triggers>

              <Trigger Property=”IsMouseOver” Value=”True”>

                  <Setter Property=”Background” Value=”Yellow” />

              </Trigger>

          </Style.Triggers>

      </Style>

  </Page.Resources>

  <Grid> 

      <TextBlock

          Background=”Red”

          Text=”Test”

          TextAlignment=”Center”

          HorizontalAlignment=”Center”

          VerticalAlignment=”Center”

          Width=”100″ />

  </Grid>

</Page>

 

There is a trigger for the Grid that changes its Background to yellow when IsMouseOver is true. If you run this and move the mouse over the Grid without going over the TextBlock, the background of the Grid will remain the same. However, once you move the mouse over the TextBlock, the background of the Grid will change. Then something interesting happens – once the mouse leaves the TextBlock buts remains within the Grid the background of the Grid will remain Yellow. This basically comes back to the fact that the default background of the Grid is null. If you were to add a setter to the Style set the Background to Transparent (don’t set it explicitly or the mouse over won’t work since you’ll be providing a local value which will take predence over the style trigger) then the background would have changed to yellow as soon as the mouse entered the Grid.

 

     <Style TargetType=”{x:Type Grid}”>

          <Setter Property=”Background” Value=”Transparent” />

          <Style.Triggers>

              <Trigger Property=”IsMouseOver” Value=”True”>

                  <Setter Property=”Background” Value=”Yellow” />

              </Trigger>

          </Style.Triggers>

      </Style>

An interesting thing to note here is that the TextBlock doesn’t have this issue. So if you were to modify the original source and explicitly set the TextBlock’s Background to {x:Null} or not set it (since it defaults to null) and rerun the original test, you will find that the background of the Grid still changes to yellow when you go over the TextBlock (and not just when you go over the actual rendered text). The reason that this occurs is because the TextBlock explicitly overrides UIElement.HitTestCore and returns true if the specified point is within its rect. There are actually a few other elements that do this as well including ScrollViewer and InkCanvas. For TextBlock I think the main reason is that you probably don’t want the IsMouseOver changing as you move across the text in between characters but this is just a guess.

Another property that affects hit testing in WPF is the IsHitTestVisible. This property determines if the element and its descendants should be hidden from hit testing. I phrased it in this way because if you set IsHitTestVisible to false on the Grid in the sample above, it wouldn’t matter what the IsHitTestVisible state of the descendants is set to since the hit test that is performed to evaluate the IsMouseOver state is going to skip the Grid element and not traverse into its children.

Next time I’ll get to the real reason I started writing about hit testing today – to discuss the methods available for performing hit testing in code.