WPF Notable IsHitTestVisible

This property may not be used very often in our daily work. Let's first take a look at the explanation on MSDN:

The explanation is very professional, but I still didn't understand it.

Let me share my understanding: setting this property to false makes no visual difference, but operationally it is completely ignored – it does not trigger events, allowing you to click directly on the elements beneath it.

This property conveniently solves common problems we encounter in work, such as the following example:

Notice the top part. The effect is simple – just a gradient effect. But this gradient spans two columns, making it a bit tricky to handle.

Of course, there are many solutions:

We could write two styles for ListBoxItem, where the first one has a gradient background at the top that matches the right side, implemented via a style selector. That is obviously more complicated.

Alternatively, we could place a gradient in the large background and make the upper half of the ListBoxItem transparent. This is relatively simpler, but might not achieve the desired effect.

The IsHitTestVisible property perfectly solves this problem. Simply place a Border on top with a gradient background, and set IsHitTestVisible to false. This way you can both see the gradient effect and click directly through the Border to the ListBoxItem. Setting a single property solves the issue, which is very convenient. It's like putting a mask on top – you can see the mask but can't click on it.

I also thought of another scenario similar to this:

In this effect, the top layer is an image with IsHitTestVisible set to false and an opacity of 0.3.

It's not that the image is a background and all controls are semi-transparent.

See the code:

XAML:

<Grid>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="70"></RowDefinition>
      <RowDefinition></RowDefinition>
      <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Border Background="#555F5F">
      <label Content="logo" Foreground="White"></label>
    </Border>
    <Grid Grid.Row="1" Background="#AAAFAF">
      <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Button.Click="StackPanel_Click"
      >
        <button Width="132" Height="32" Content="金闪闪" Margin="10"></button>
        <button Width="132" Height="32" Content="小圆" Margin="10"></button>
      </StackPanel>
      <label
        Content="我不透明"
        Background="Green"
        Foreground="Blue"
        Width="100"
        Height="100"
        Margin="76,29,266,171"
      ></label>
      <label
        Content="我不透明"
        Background="Red"
        Foreground="Blue"
        Width="100"
        Height="40"
        Margin="112,40,230,220"
      ></label>
    </Grid>
    <Border Grid.Row="2" Background="#555F5F">
      <label Content="状态栏" Foreground="White"></label>
    </Border>
  </Grid>
  <image
    Name="img"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="0"
    Height="0"
    Source="/Image/jinshanshan.jpg"
    Stretch="Fill"
    Opacity="0.1"
    IsHitTestVisible="False"
  ></image>
</Grid>

Code-behind:

private void StackPanel_Click(object sender, RoutedEventArgs e)
{
    Button btn = (Button)e.OriginalSource;
    string content = btn.Content.ToString();
    if (content == "金闪闪")
    {
        img.Source = new BitmapImage(new Uri(@"/Image/jinshanshan.jpg", UriKind.Relative));
    }
    if (content == "小圆")
    {
        img.Source = new BitmapImage(new Uri(@"/Image/xiaoyuan.jpg", UriKind.Relative));
    }

    DoubleAnimation daX = new DoubleAnimation();
    daX.From = 0;
    daX.To = 400;
    daX.FillBehavior = FillBehavior.HoldEnd;
    Storyboard.SetTarget(daX, img);
    Storyboard.SetTargetProperty(daX, new PropertyPath(Image.WidthProperty));
    DoubleAnimation daY = new DoubleAnimation();
    daY.From = 0;
    daY.To = 400;
    daY.FillBehavior = FillBehavior.HoldEnd;
    Storyboard.SetTarget(daY, img);
    Storyboard.SetTargetProperty(daY, new PropertyPath(Image.HeightProperty));
    DoubleAnimation daOp = new DoubleAnimation();
    daOp.From = 1;
    daOp.To = 0.3;
    daOp.FillBehavior = FillBehavior.HoldEnd;
    Storyboard.SetTarget(daOp, img);
    Storyboard.SetTargetProperty(daOp, new PropertyPath(Image.OpacityProperty));

    Storyboard sb = new Storyboard();
    sb.Children.Add(daX);
    sb.Children.Add(daY);
    sb.Children.Add(daOp);
    sb.Begin();
}