WPF - событие триггера, если курсор находится в определенной позиции на изображении - PullRequest
Новая
       35

WPF - событие триггера, если курсор находится в определенной позиции на изображении

0 голосов
/ 06 мая 2018

Я пытаюсь вызвать событие, если курсор находится в определенной части изображения в WPF. Я подумал, что мог бы попытаться «нарисовать» прямоугольник поверх изображения и использовать событие mousein / out. В настоящее время я не знаю, как это сделать.
Так, например, я хочу вызвать всплывающую подсказку, если курсор входит в красный прямоугольник изображения. enter image description here

В настоящее время я использую тег <Image></Image> в WPF, но, похоже, это не сработает ....

Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Я подумал, что мог бы попытаться нарисовать прямоугольник над изображением и использовать событие 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 невидимого элемента наложения.

0 голосов
/ 07 мая 2018

Я бы, наверное, использовал, что MouseEventArgs.GetPosition дает мне позицию относительно объекта, который я передаю в качестве аргумента. Кроме того, я бы попытался использовать масштабирование изображения, чтобы этот подход был надежным для последующего изменения размера изображения. Такой подход все равно даст вам кучу магических чисел в вашем коде, но я не думаю, что этого можно избежать.

Вот краткий пример, демонстрирующий, что я имею в виду.

Окончательный результат

Вот рисунок, демонстрирующий результат подхода, обратите внимание на

Да, это сова

появляется, когда мы находимся над определенной частью изображения.

A pretty owl.

MainWindow.xaml 

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

MainWindow.xaml.cs 

using System.Windows;
using System.Windows.Input;

namespace MousePosition
{
    /// <summary>
    /// Interaktionslogik für MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void MousePosition(object sender, MouseEventArgs e)
        {
            var scale = PrettyOwl.ActualWidth / PrettyOwl.Source.Width;

            Point p = e.GetPosition(PrettyOwl);

            Feedback.Text = string.Format("GetPosition(Mouse): X = {0}, Y = {1}", p.X, p.Y);

            if (p.X > 100*scale && p.X < 200*scale && p.Y > 100*scale && p.Y < 200*scale)
            {
                WeAreThere.Text = "Yup, this is an owl";
            }

            e.Handled = true;
        }
    }
}

Надеюсь, это поможет!

...