在 WPF 中，鼠标悬停是如何工作的? [英] How bubbling up of mouse over works in WPF?

问题描述

我有一个列跨度为 2 的矩形，网格行中有一个标签和一个按钮.

I have a rectangle with column span 2 and, a label and a button in a grid row.

<Rectangle Grid.Row="2" Grid.ColumnSpan="2"></Rectangle>
<Label Grid.Row="2" Grid.Column="0">Product Two</Label>
<Button Grid.Row="2" Grid.Column="1" Click="Button2_Click">Select</Button>

我打算在鼠标悬停在行上时更改矩形的填充颜色.但似乎鼠标悬停在标签或按钮上会阻止鼠标悬停在矩形上，这与 HTML 不同.

I intend to change the fill color of the rectangle when mouse over on the row occurs. But it seems mouse over on label or button prevents mouse over on the rectangle, unlike HTML.

这是默认行为吗?什么是正确的方法?

Is this the default behavior? Whats the right approach?

编辑，网格的完整 XAML

Edit, Full XAML for the grid

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

    <Grid.Resources >
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Fill" Value="Transparent"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill" Value="#44000000"/>
                </Trigger>
            </Style.Triggers>
        </Style>            
    </Grid.Resources>

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

    <Rectangle Grid.Row="1" Grid.ColumnSpan="2"></Rectangle>
    <Label Grid.Row="1" Grid.Column="0">Product One</Label>
    <Button Grid.Row="1" Grid.Column="1" Click="Button1_Click">Select</Button>
</Grid>

推荐答案

看起来你想要完成的事情可以通过用一个 Grid 来代替矩形来解决，以概述你的其他项目.

It seems what you want to accomplish can be solved by replacing the rectangle with a Grid outlining your other items.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <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">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.Resources >
            <Style TargetType="{x:Type Grid}">
                <Setter Property="Background" Value="Transparent"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#44000000"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
        <Label Grid.Row="1" Grid.Column="0">Product One</Label>
        <Button Grid.Row="1" Grid.Column="1">Select</Button>
    </Grid>
</Grid>

我想用这个 xaml 改变一些其他的东西，但这不是你的问题的一部分.

There are some other stuff i want to change with this xaml but that is not part of your problem.

让我知道这是否给出了您想要的结果.

Let me know if this is giving the result you want.

这篇关于在 WPF 中，鼠标悬停是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！