WPF - How to write a trigger for mouse over of grid?

19
votes

I see that Button object has a IsMouseOVer property.

But how do create an effect for the mouse over of a grid or other element that does not have IsMouseOver??

Thanks Malcolm

Edit: i figured it out. I was using the wrong method for setting the trigger.

3
wpftriggers
I am wondering what the correct method is, in case I run into the same problem later.:) – Ria

3 Answers

50
votes

I realize that I am responding to a dead thread but since I came across it, and since the thread is not answered, I am going to answer it.

The WPF Grid has an "IsMouseOver" property.

I think this question was asked because the "IsMouseOver" property only changes if the mouse is over a "hit-testable" control (ie a Button, or ComboBox) within the Grid itself.

Therefore, it may appear that the "IsMouseOver" property doesn't work (especially if you are using it in a trigger to set the Grid's Visible property).

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. 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. This is because the first column, with nothing in it, is not hit-testable; whereas, the button within the second column is hit-testable and so the event is triggered.

If you want the Grid's IsMouseOver property to detect when the mouse is anywhere over the Grid itself all you have to do is set the Background property of the Grid to something that is not Null (set it to Transparent for example). Setting the Background property will make the Grid "hit-testable".

The following code will fix the problem:

<Grid Background="Transparent">
  <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"></Setter>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Opacity" Value="1"></Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Grid.Style>
</Grid>

-Frinny

3
votes

One can also use the MouseEnter/MouseLeave events as such:

<Grid Name="grid">
    <Grid.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,0,-300,0" To="0,0,0,0" DecelerationRatio=".9" Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,0,0,0" To="0,0,-300,0" AccelerationRatio=".9" Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>
0
votes

That would be the "MouseEnter" and "MouseLeave" actions on the WPF object.