Перетаскивание Drag and drop

Перетаскивание является интуитивно понятным способом передачи данных в приложении или между приложениями на компьютере с Windows. Drag and drop is an intuitive way to transfer data within an application or between applications on the Windows desktop. Перетаскивание дает пользователю возможность перемещать данные между приложениями или внутри приложения с помощью стандартного жеста («нажатие-удержание-сдвиг» с помощью пальца или «нажатие-сдвиг» с помощью мыши или пера). Drag and drop lets the user transfer data between applications or within an application using a standard gesture (press-hold-and-pan with the finger or press-and-pan with a mouse or a stylus).

Источник перетаскивания, который является приложением или областью, в которой запускается жест перетаскивания, предоставляет данные для передачи путем заполнения объекта пакета данных, который может содержать стандартные форматы данных, включая текст, RTF, HTML, точечные рисунки, элементы хранилища или пользовательские форматы данных. The drag source, which is the application or area where the drag gesture is triggered, provides the data to be transferred by filling a data package object that can contain standard data formats, including text, RTF, HTML, bitmaps, storage items or custom data formats. Источник также обозначает тип операций, которые он поддерживает: копировать, переместить или ссылка. The source also indicates the kind of operations it supports: copy, move or link. При освобождении указателя выполняется перетаскивание. When the pointer is released, drop occurs. Место переноса, которое является приложением или областью под указателем, обрабатывает пакет данных и возвращает тип выполненной операции. The drop target, which is the application or area underneath the pointer, processes the data package and returns the type of operation it performed.

Во время перетаскивания пользовательский интерфейс перетаскивания предоставляет визуальную индикацию типа выполняемой операции перетаскивания. During drag and drop, the drag UI provides a visual indication of the type of drag-and-drop operation that’s taking place. Эта визуальная обратная связь изначально предоставляется источником, но может быть изменена местом переноса при наведении на них указателя. This visual feedback is initially provided by the source but can be changed by the targets as the pointer moves over them.

Современная функция перетаскивания доступна на всех устройствах, поддерживающих UWP. Modern drag and drop is available on all devices that support UWP. Эта функция позволяет передавать данные между приложениями любого типа либо внутри самого приложения, включая классические Windows-приложения. Тем не менее в этой статье основное внимание уделяется API-интерфейсу XAML для современной операции перетаскивания. It allows data transfer between or within any kind of application, including Classic Windows apps, although this article focuses on the XAML API for modern drag and drop. После реализации функции перетаскивание корректно работает во всех направлениях, в том числе из приложения UWP в приложение UWP, из приложения UWP в классическое приложение и из классического приложения в приложение UWP. Once implemented, drag and drop works seamlessly in all directions, including app-to-app, app-to-desktop, and desktop-to app.

Здесь приведен обзор действий по реализации функции перетаскивания в вашем приложении. Here’s an overview of what you need to do to enable drag and drop in your app:

1. Включите возможность перетаскивания элемента, установив для его свойства CanDrag значение true. Enable dragging on an element by setting its CanDrag property to true.
2. Выполнять построение пакета данных. Build the data package. Система обрабатывает изображения и текст автоматически, но для другого содержимого необходимо обрабатывать события DragStarted и DragCompleted и использовать их для создания собственного пакета данных. The system handles images and text automatically, but for other content, you’ll need to handle the DragStarted and DragCompleted events and use them to construct your own data package.
3. Включите перетаскивание, задав свойству AllowDrop значение true для всех элементов, которые могут принимать перетаскиваемое содержимое. Enable dropping by setting the AllowDrop property to true on all the elements that can receive dropped content.
4. Обработайте событие DragOver , чтобы сообщить системе, какие типы операций перетаскивания может принимать элемент. Handle the DragOver event to let the system know what type of drag operations the element can receive.
5. Обработайте событие Drop для получения перетаскиваемого содержимого. Process the Drop event to receive the dropped content.

Включение перетаскивания Enable dragging

Чтобы включить возможность перетаскивания элемента, задайте его свойству CanDrag значение true . To enable dragging on an element, set its CanDrag property to true . Это делает элемент и содержащиеся в нем элементы в случае коллекций, например ListView, с помощью перетаскивания. This make the element—and the elements it contains, in the case of collections like ListView—draggable.

Определите, какие элементы будут поддерживать перетаскивание. Be specific about what’s draggable. Пользователям не требуется перетаскивать все содержимое в вашем приложении; только определенные элементы, такие как изображения и текст. Users won’t want to drag everything in your app, only certain items, such as images or text.

Чтобы разрешить перетаскивание, больше ничего делать не нужно, если только вы не собираетесь менять пользовательский интерфейс (об этом рассказывается дальше в статье). You don’t need to do any other work to allow dragging, unless you want to customize the UI (which is covered later in this article). Для настройки завершения перетаскивания придется выполнить некоторые действия. Dropping requires a few more steps.

Создание пакета данных Construct a data package

В большинстве случаев система будет создавать пакет данных за вас. In most cases, the system will construct a data package for you. Система автоматически обрабатывает: The system automatically handles:

При работе с другим содержимым необходимо обработать события DragStarted и DragCompleted и использовать их для создания собственного пакета данных DataPackage. For other content, you’ll need to handle the DragStarted and DragCompleted events and use them to construct your own DataPackage.

Включение отпускания Enable dropping

Следующая разметка демонстрирует, как сделать отпускание доступным для конкретной области приложения, используя AllowDrop в XAML. The following markup shows how to set a specific area of the app as valid for dropping by using the AllowDrop in XAML. Если пользователь попытается отпустить перетаскиваемое содержимое в другом месте, система не позволит сделать это. If a user tries to drop somewhere else, the system won’t let them. Если вы хотите, чтобы пользователи могли использовать перетаскивание в любом месте вашего приложения, установите весь фон в качестве места переноса. If you want users to be able to drop items anywhere on your app, set the entire background as a drop target.

Обработка события DragOver Handle the DragOver event

Событие DragOver возникает, когда пользователь перетаскивает элемент в приложении, но еще не завершил этот процесс. The DragOver event fires when a user has dragged an item over your app, but not yet dropped it. В этом обработчике необходимо с помощью свойства AcceptedOperation выбрать, какой вид операции будет поддерживать ваше приложение. In this handler, you need to specify what kind of operations your app supports by using the AcceptedOperation property. Наиболее распространено копирование. Copy is the most common.

Обработка завершения перетаскивания Process the Drop event

Событие Drop возникает, когда пользователь отпускает элементы в допустимой области приложения. The Drop event occurs when the user releases items in a valid drop area. Обработайте их с помощью свойства DataView. Process them by using the DataView property.

Для простоты в примере ниже предположим, что пользователь перетащил одну фотографию напрямую. For simplicity in the example below, we’ll assume the user dropped a single photo and access it directly. На самом деле пользователи могут перетаскивать несколько элементов разных форматов одновременно. In reality, users can drop multiple items of varying formats simultaneously. Ваше приложение должно обрабатывать эту возможность, проверяя, какие типы файлов были перемещены перетаскиванием и сколько файлов существует, и обрабатывать каждый из них соответствующим образом. Your app should handle this possibility by checking what types of files were dropped and how many there are, and process each accordingly. Вам также необходимо решить, следует ли уведомить пользователей, если они пытаются сделать что-то, что ваше приложение не поддерживает. You should also consider notifying the user if they’re trying to do something your app doesn’t support.

Настройка пользовательского интерфейса Customize the UI

Система предоставляет пользовательский интерфейс по умолчанию для перетаскивания. The system provides a default UI for dragging and dropping. Также можно настроить различные области пользовательского интерфейса, например пользовательские заголовки и глифы, или вообще отключить отображение пользовательского интерфейса. However, you can also choose to customize various parts of the UI by setting custom captions and glyphs, or by opting not to show a UI at all. Чтобы настроить пользовательский интерфейс, используйте свойство DragEventArgs.DragUIOverride. To customize the UI, use the DragEventArgs.DragUIOverride property.

Открытие контекстного меню на элементе, который можно перетаскивать с помощью сенсорного управления Open a context menu on an item you can drag with touch

При использовании сенсорного управления перетаскивание UIElement и открытие его контекстного меню выполняются аналогичными сенсорными жестами, каждый из которых начинается с нажатия и удерживания. When using touch, dragging a UIElement and opening its context menu share similar touch gestures; each begins with a press and hold. Вот как система различает эти два действия над элементами в вашем приложении, поддерживающими оба действия: Here’s how the system disambiguates between the two actions for elements in your app that support both:

• Если пользователь нажмет и будет удерживать элемент и начнет перетаскивать его в пределах 500 миллисекунд, элемент перетаскивается, а контекстное меню не отображается. If a user presses and holds an item and begins dragging it within 500 milliseconds, the item is dragged and the context menu is not shown.
• Если пользователь нажмет и будет удерживать элемент, но не начнет перетаскивать его в течение 500 миллисекунд, открывается контекстное меню. If the user presses and holds but does not drag within 500 milliseconds, the context menu is opened.
• Если пользователь попытается перетащить элемент (не отрывая палец) после открытия контекстного меню, меню закрывается, и начинается перетаскивание. After the context menu is open, if the user tries to drag the item (without lifting their finger), the context menu is dismissed and the drag will start.

Обозначение элемента в ListView или GridView в качестве папки Designate an item in a ListView or GridView as a folder

Вы можете указать ListViewItem или GridViewItem как папку. You can specify a ListViewItem or GridViewItem as a folder. Это особенно удобно в сценариях TreeView и проводника. This is particularly useful for TreeView and File Explorer scenarios. Для этого явно задайте свойству AllowDrop значение True для этого элемента. To do so, explicitly set the AllowDrop property to True on that item.

Система автоматически отобразит соответствующие анимации перетаскивания в папку в противоположность элементу, не являющемся папкой. The system will automatically show the appropriate animations for dropping into a folder versus a non-folder item. Код вашего приложения должен продолжать обрабатывать событие Drop элемента папки (а также элемента, не являющегося папкой), чтобы обновить источник данных и добавить перетаскиваемый элемент в целевую папку. Your app code must continue to handle the Drop event on the folder item (as well as on the non-folder item) in order to update the data source and add the dropped item to the target folder.

Включение изменения порядка перетаскивания в ListView Enable drag and drop reordering within ListViews

ListViewподдерживает изменение порядка на основе перетаскивания, используя API, очень похожий на API кандроп , описанный в этой статье. ListViews support drag-based reordering out of the box, using an API very similar to the CanDrop API described in this article. Как минимум необходимо добавить свойства AllowDrop и канреордеритемс . At minimum, you add the AllowDrop and CanReorderItems properties.

Drag Drop Класс

Определение

Предоставляет вспомогательные методы и поля для инициирования операций перетаскивания, включая метод для начала операции перетаскивания и средства добавления и удаления связанных с перетаскиванием обработчиков событий. Provides helper methods and fields for initiating drag-and-drop operations, including a method to begin a drag-and-drop operation, and facilities for adding and removing drag-and-drop related event handlers.

Комментарии

Перетаскивание часто относится к методу передачи данных, который включает в себя использование мыши (или другого указывающего устройства) для выбора одного или нескольких объектов, перетаскивания этих объектов на некоторый желаемый целевой объект перетаскивания в пользовательском интерфейсе и их удаления. Drag-and-drop commonly refers to a method of data transfer that involves using a mouse (or some other pointing device) to select one or more objects, dragging these objects over some desired drop target in the user interface (UI), and dropping them. Операция перетаскивания аналогична операции копирования (или вырезания), которая используется для переноса данных из одного объекта или приложения в другое. A drag-and-drop operation is analogous to a copy (or cut)-and-paste operation that is used to transfer data from one object or application to another. Операции перетаскивания обычно используют две стороны: источник перетаскивания, из которого происходят перетаскиваемые данные, и объект перетаскивания, который получает удаленные данные. Drag-and-drop operations typically involve two parties: a drag source from which the dragged data originates and a drop target which receives the dropped data. События и методы, необходимые для операций перетаскивания, определяются в классе DragDrop. The events and methods required for drag-and-drop operations are defined in the DragDrop class. События перетаскивания являются присоединенными событиями, которые могут быть присоединены к любому UIElement или ContentElement . The drag-and-drop events are attached events that can be attached to any UIElement or ContentElement. Источник перетаскивания и цель перетаскивания могут быть элементами пользовательского интерфейса в одном приложении или в разных приложениях. The drag source and drop target may be UI elements in the same application or in different applications. Однако цель перетаскивания должна уметь обрабатывать данные, передаваемые источником перетаскивания. However, the drop target must know how to process the data being passed by the drag source.

UIElementКлассы и ContentElement содержат псевдонимы для событий перетаскивания, чтобы события отображались в списке члены класса, если эти классы унаследованы как базовый класс. The UIElement and ContentElement classes contain aliases for the drag-and-drop events so that the events appear in the class members list when these classes are inherited as a base class. При присоединении обработчика событий к событию перетаскивания в одном из этих классов обработчик прикрепляется к базовому DragDrop событию и получает один и тот же экземпляр данных события. When you attach an event handler to a drag-and-drop event on one of these classes, the handler is attached to the underlying DragDrop event and they receive the same instance of event data. Пример см. в разделе UIElement.Drop. For example, see UIElement.Drop.

Источник перетаскивания инициирует операцию перетаскивания путем вызова статического метода DoDragDrop и передачи в него передаваемых данных. The drag source initiates a drag-and-drop operation by calling the static DoDragDrop method and passing the transferred data to it. Элемент обычно обрабатывает следующие события, когда это источник перетаскивания: An element typically handles the following events when it is a drag source:

Элемент обычно обрабатывает следующие события, когда это цель перетаскивания: An element typically handles the following events when it is a drop target: