WPF Grid IsMouseOver Property

Question

The WPF Grid has an "IsMouseOver" property that you can use in the Grid's Style's Triggers.

My problem is that the "IsMouseOver" property only changes if the mouse is over some control (ie a Button, or ComboBox) within the Grid itself.

For example:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="25" />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>

  <Button Grid.Column="1">A Button</Button>

  <Grid.Style>
    <Style TargetType="{x:Type Grid}">
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="False">
          <Setter Property="Opacity" Value="0.5"></Setter>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Opacity" Value="1"></Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Grid.Style>
</Grid>

The above Grid and it's contents will be displayed in half opacity so that you can see the controls.

You will notice that the opacity will not be set to full if you hover over the first column (which doesn't contain anything).

However the opacity will be set to full if you hover over the button in the second column.

In my application, the Grid that I'm setting the triggers for is being displayed on top of an image control. I do not want the Grid to be displayed until the mouse is hovering over the image... In other words, since the Grid is on top of the image, I don't want the grid to be displayed until the mouse is hovering over the Grid (anywhere in the grid) because the Grid is on top of the image.

Does anyone know how to accomplish this?

Thanks!

-Frinny

Answer 1

Your problem is that the Grid itself is not hit-testable because it has no background. Try this instead:

<Grid Background="Transparent">

Answer 2

set the grids background to transparent, then it should work

for details why this is so please look here