WPF создание системы Drag&Drop

Что такое WPF?

Windows Presentation Foundation — один из компонентов ядра .NET Framework, который позволяет разработчикам создавать богатые, различные Windows приложения.

Как создать систему Drag&Drop?

Для реализации системы Drag&Drop в приложении WPF, сначала нужно добавить компонент Image на рабочую область. Для этого следует перейти в «Панель элементов» и найти объект Image, затем переместить его на рабочую область.

WPF - Drag&Drop - добавление компонента

Далее поменять его размеры и указать изображению ширину и имя для обращения из скрипта. Width и Height будут равны 50 пикселям, в качестве изображения я укажу пуговицу, нужно прописать атрибут Source, значением которого будет полный путь до картинки, включая её имя и тип изображения. Имя данного объекта будет image.

WPF - Drag&Drop - Добавление атрибутов

Теперь у изображения нужно создать event (событие) которое срабатывает при нажатии на это изображение. Необходимо прописать MouseDown у изображения и выбрать предложенный вариант.

WPF - Drag&Drop - создание события

Так же прописывается MouseUp у изображения, компонента Grid и самой формы, прикрепляя все события на одну функцию.

WPF - Drag&Drop - создание событий

После перехода к программной части формы (MainWindow.xaml.cs), можно увидеть две пустые функции.

WPF - Drag&Drop - функции событий

Теперь нужно создать таймер, который будет вызывать функцию через некоторое время. Для этого создаётся переменную c типом DispatcherTimer и добавляется библиотека using System.Windows.Threading;

WPF - Drag&Drop - создание таймера

Теперь нужно запустить таймер. Для этого после инициализации компонентов прописывается следующий код:

dispatcherTimer.Tick += DispatcherTimer_Tick; // вызываем функцию по истечению таймера
dispatcherTimer.Interval = new System.TimeSpan(0, 0, 0, 0, 1000 / 60); // задаём интервал (60 кадрров)

Далее создаётся функция, которая будет вызываться по истечению кода:

private void DispatcherTimer_Tick(object sender, System.EventArgs e)
{



}

В данной функции будет происходить перемещение изображения по полотну. Здесь же прописывается следующий код, который перемещает изображение:

// перемещение объекта
image.Margin = new Thickness(Mouse.GetPosition(this).X - 25, Mouse.GetPosition(this).Y - 25, 0, 0);

Здесь задаётся изображению новые отступы от края полотна. В качестве отступа слева и сверху выступают координаты мыши относительно окна. Сделаем изображение посередине курсора, для этого вычтем половину ширины и высоты — 25.

Не стоит забывать добавить библиотек «using System.Windows.Input;» , которая позволяет взаимодействовать с мышью.

WPF - Drag&Drop - перемещение изображения к курсору

В функции которая выполняется при нажатии, прописываем следующий код:

dispatcherTimer.Start(); // запускаем таймер

В функции которая происходит при отпускании клавиши, вызываем остановку таймера:

dispatcherTimer.Stop(); // останавливаем таймер

Полный код:

WPF - Drag&Drop - полный код

Запуск приложения и проверка работоспособности:

WPF - Drag&Drop - до перемещения
WPF - Drag&Drop - после перемещения

Таким способом можно реализовать систему Drag&Drop в приложении WPF.

Автор статьи: Александр Каримов

5/5 (1)

Оцените