WPF - 如果光标位于图像

时间:2018-05-06 11:34:31

标签: wpf image bitmap datatrigger

如果光标位于WPF中图像的某个部分,我正在尝试触发事件。我想我可能会尝试在图像上“绘制”一个矩形并使用mousein / out事件。我目前不知道如何做到这一点。
因此,例如,如果光标进入图像的红色矩形,我想触发工具提示。 enter image description here

目前我在WPF中使用<Image></Image>标签,但似乎没有用....

感谢任何帮助!

2 个答案:

答案 0 :(得分:0)

我可能会利用,MouseEventArgs.GetPosition给我相对于我作为参数交出的对象的位置。此外,我会尝试使用图像的缩放,以便这种方法对于稍后改变图像大小是稳健的。 这种方法仍会在代码中为您提供一堆Magic Numbers,但我认为可以避免这种情况。

这是一个展示我的意思的快速示例。

最终结果

这是一个展示方法结果的gif,请注意

  

是的,这是一只猫头鹰

当我们超过图像的某个部分时,

出现。

A pretty owl.

<强> MainWindow.xaml

import android.widget.Toast;

<强> MainWindow.xaml.cs

<Window x:Class="MousePosition.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MousePosition"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid ShowGridLines="True" MouseMove="MousePosition">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

    <TextBlock Grid.Column="1" x:Name="Feedback"/>
    <Image x:Name="PrettyOwl" Grid.Column="1" Grid.Row="1" Source="Images/10-dithering-opt.jpg"/>
    <TextBlock Grid.Column="1" Grid.Row="2" x:Name="WeAreThere"/>
</Grid>

希望有所帮助!

答案 1 :(得分:0)

  

我想我可能会尝试在图像上“绘制”一个矩形并使用mousein / out事件。我目前不知道如何做到这一点。

您可以将Image和不可见元素(背景为Transparent)放在同一Grid内:

<Grid>
    <Image Source="screen.png" />
    <Grid Background="Transparent" Width="10" Height="10" Margin="-40,-40,0,0"
          MouseEnter="Grid_MouseEnter"
          MouseLeave="Grid_MouseLeave"/>
</Grid>

使用隐形叠加元素的Image属性定义要交互的Margin部分。