WPF - 如何为鼠标悬停在网格上编写触发器？

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

提问by Malcolm

I see that Button object has a IsMouseOVer property.

我看到 Button 对象有一个 IsMouseOver 属性。

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

但是如何为没有 IsMouseOver 的网格或其他元素的鼠标悬停创建效果？

Thanks Malcolm

谢谢马尔科姆

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

编辑：我想通了。我使用了错误的方法来设置触发器。

回答by Frinavale

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 Gridhas an "IsMouseOver" property.

在WPF网格有一个“IsMouseOver”属性。

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

我认为问这个问题是因为“IsMouseOver”属性仅在鼠标位于网格本身内的某个控件（即按钮或组合框）上时才会更改。

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

因此，“IsMouseOver”属性似乎不起作用（尤其是当您在触发器中使用来设置网格的 Visible 属性时）。

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 notbe set to full if you hover over the first column (which doesn't contain anything); however the opacity willbe 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.

上面的 Grid 及其内容将以半不透明度显示。您会注意到，如果您将鼠标悬停在第一列（不包含任何内容）上，则不透明度不会设置为完全；但是，如果您将鼠标悬停在第二列中的按钮上，则不透明度将设置为完全。这是因为第一列没有任何内容，不可命中测试；而第二列中的按钮是可点击测试的，因此会触发事件。

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".

如果您希望 Grid 的 IsMouseOver 属性检测鼠标何时位于 Grid 本身上方的任何位置，您所要做的就是将 Grid 的 Background 属性设置为非 Null 的内容（例如将其设置为 Transparent）。设置背景属性将使网格“命中测试”。

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

-弗林尼

回答by bifedefrango

One can also use the MouseEnter/MouseLeaveevents as such:

还可以像这样使用MouseEnter/MouseLeave事件：

<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>

回答by CodeMouse92

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

这将是 WPF 对象上的“MouseEnter”和“MouseLeave”操作。