如何：当鼠标位于 WPF 边框的边和角之一时触发事件

Posted 2023-02-22

【中文标题】如何：当鼠标位于 WPF 边框的边和角之一时触发事件

【英文标题】：HOWTO: Fire an event when mouse is on one of the sides and corners of a WPF border

【发布时间】：2019-06-13 19:50:43

【问题描述】：

基本上我有一个 WPF 边框，我想在鼠标位于边角之一时触发一个事件：

左 左上角 左下角 对 右上角 右下角 顶部 底部

我需要检测鼠标何时在它们上以触发不同的事件。

我该怎么做？

【问题讨论】：

必须在边框上，还是可以用其他控件包围边框，如果鼠标在它们上面可以触发？其他控件（可能是其他边界）将位于您上面列出的位置。

@redcurry 它只能在边框上，它有一个borderthickness="1" 和borderbrush="LightBlue"。

这是它必须在边界上的唯一原因吗？通过将这些“边缘”控件放在边框顶部的正确位置，您仍然可以获得相同的效果。

@redcurry 好的，你能详细解释一下如何吗？你能给我举个小例子吗？

【参考方案1】：

您可以在Border 上放置一层控件并检测它们上的鼠标事件，而不是直接在Border 上检测鼠标事件。放置这一层最简单的方法是使用Grid，并使用简单的Borders 作为控件：

<Grid>
    <!-- Your border -->
    <Border
        BorderThickness="1"
        BorderBrush="LightBlue"
        Width="100" Height="100"
        >
        <!-- Contents -->
    </Border>

    <Grid
        Width="100" Height="100"
        >
        <Grid.RowDefinitions>
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
        </Grid.ColumnDefinitions>

        <Border
            Grid.Row="0" Grid.Column="0"
            Background="Transparent"
            MouseEnter="OnMouseEnterTopLeft"
            />
        <Border
            Grid.Row="0" Grid.Column="1"
            Background="Transparent"
            MouseEnter="OnMouseEnterTop"
            />
        <Border
            Grid.Row="0" Grid.Column="2"
            Background="Transparent"
            MouseEnter="OnMouseEnterTopRight"
            />
        <Border
            Grid.Row="1" Grid.Column="0"
            Background="Transparent"
            MouseEnter="OnMouseEnterLeft"
            />
        <Border
            Grid.Row="1" Grid.Column="2"
            Background="Transparent"
            MouseEnter="OnMouseEnterRight"
            />
        <Border
            Grid.Row="2" Grid.Column="0"
            Background="Transparent"
            MouseEnter="OnMouseEnterBottomLeft"
            />
        <Border
            Grid.Row="2" Grid.Column="1"
            Background="Transparent"
            MouseEnter="OnMouseEnterBottom"
            />
        <Border
            Grid.Row="2" Grid.Column="2"
            Background="Transparent"
            MouseEnter="OnMouseEnterBottomRight"
            />
    </Grid>
</Grid>

请注意Border 和Grid 的大小必须相同才能完美对齐。它们不需要像我在这里展示的那样是固定大小的；它们可能会在容器内伸展。

在Grid 对行和列的定义中，我选择了 5 像素的检测大小，当然您可以选择任何您想要的大小。此外，Grid 中的每个Border 必须将其Background 设置为Transparent；否则，鼠标事件不会被检测到。