WPF鼠标悬停冒泡机制及行悬停触发Rectangle变色问题

这确实是WPF的默认行为，和HTML的事件冒泡机制不同——WPF的命中测试会优先把鼠标事件传递给最上层的交互控件（比如Label、Button），下方的Rectangle不会再收到鼠标悬停事件，所以你的样式触发器自然不会触发。

下面是几种靠谱的解决方法，按推荐程度排序：

方法1：用容器包裹行内容，绑定容器的IsMouseOver状态 #

这是最优雅的WPF式解决方案，核心思路是给每一行的所有元素套一个容器（比如Border或Grid），然后让Rectangle通过DataTrigger绑定这个容器的IsMouseOver属性。这样不管鼠标悬停在Label还是Button上，只要在容器范围内，就能触发Rectangle的颜色变化。

修改后的XAML示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- 表头 -->
    <Label Grid.Row="0" Grid.Column="0" FontWeight="Bold">Product</Label>
    <Label Grid.Row="0" Grid.Column="1">Choose</Label>

    <!-- 第一行：用Border作为行容器 -->
    <Border Grid.Row="1" Grid.ColumnSpan="2" x:Name="Row1Container">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!-- Rectangle放在最上层，但不拦截鼠标事件 -->
            <Rectangle Grid.ColumnSpan="2" IsHitTestVisible="False">
                <Rectangle.Style>
                    <Style TargetType="{x:Type Rectangle}">
                        <Setter Property="Fill" Value="Transparent"/>
                        <Style.Triggers>
                            <!-- 绑定容器的IsMouseOver -->
                            <DataTrigger Binding="{Binding IsMouseOver, ElementName=Row1Container}" Value="True">
                                <Setter Property="Fill" Value="#44000000"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Rectangle.Style>
            </Rectangle>
            <Label Grid.Column="0">Product One</Label>
            <Button Grid.Column="1" Click="Button1_Click">Select</Button>
        </Grid>
    </Border>

    <!-- 第二行：同样的逻辑 -->
    <Border Grid.Row="2" Grid.ColumnSpan="2" x:Name="Row2Container">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Rectangle Grid.ColumnSpan="2" IsHitTestVisible="False">
                <Rectangle.Style>
                    <Style TargetType="{x:Type Rectangle}">
                        <Setter Property="Fill" Value="Transparent"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMouseOver, ElementName=Row2Container}" Value="True">
                                <Setter Property="Fill" Value="#44000000"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Rectangle.Style>
            </Rectangle>
            <Label Grid.Column="0">Product Two</Label>
            <Button Grid.Column="1" Click="Button2_Click">Select</Button>
        </Grid>
    </Border>
</Grid>

这里给Rectangle设置IsHitTestVisible="False"是为了让它不拦截鼠标事件，保证Label和Button能正常响应点击。

方法2：监听行容器的鼠标进入/离开事件 #

如果需要更灵活的逻辑（比如悬停时除了变色还要做其他操作），可以给行容器添加MouseEnter和MouseLeave事件，在后台代码中直接修改Rectangle的填充色。

XAML部分：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0" FontWeight="Bold">Product</Label>
    <Label Grid.Row="0" Grid.Column="1">Choose</Label>

    <!-- 第一行容器，绑定鼠标事件 -->
    <Grid Grid.Row="1" Grid.ColumnSpan="2" MouseEnter="RowContainer_MouseEnter" MouseLeave="RowContainer_MouseLeave">
        <Rectangle Grid.ColumnSpan="2" x:Name="Row1Rect" Fill="Transparent"/>
        <Label Grid.Column="0">Product One</Label>
        <Button Grid.Column="1" Click="Button1_Click">Select</Button>
    </Grid>

    <!-- 第二行容器 -->
    <Grid Grid.Row="2" Grid.ColumnSpan="2" MouseEnter="RowContainer_MouseEnter" MouseLeave="RowContainer_MouseLeave">
        <Rectangle Grid.ColumnSpan="2" x:Name="Row2Rect" Fill="Transparent"/>
        <Label Grid.Column="0">Product Two</Label>
        <Button Grid.Column="1" Click="Button2_Click">Select</Button>
    </Grid>
</Grid>

后台C#代码：

private void RowContainer_MouseEnter(object sender, MouseEventArgs e)
{
    if (sender is Grid rowGrid)
    {
        // 根据行号找到对应的Rectangle
        var rect = rowGrid.FindName($"Row{rowGrid.Row + 1}Rect") as Rectangle;
        rect?.Fill = new SolidColorBrush(Color.FromArgb(0x44, 0x00, 0x00, 0x00));
    }
}

private void RowContainer_MouseLeave(object sender, MouseEventArgs e)
{
    if (sender is Grid rowGrid)
    {
        var rect = rowGrid.FindName($"Row{rowGrid.Row + 1}Rect") as Rectangle;
        rect?.Fill = Brushes.Transparent;
    }
}

不推荐的方法：修改控件的HitTestVisible #

你可以把Label和Button的HitTestVisible设为False，这样鼠标事件会穿透到下方的Rectangle，但这会导致这些控件无法响应点击、选择等交互操作，除非你的这些控件不需要用户交互，否则不建议这么做。

内容的提问来源于stack exchange，提问作者FLash