Меню

Технологии windows drag and drop

Drag and Drop

Drag and drop refers to data transfers in which a mouse or other pointing device is used to specify both the data source and its destination. In a typical drag and drop operation, a user selects the object to be transferred by moving the mouse pointer to it and holding down either the left button or some other button designated for this purpose. While continuing to hold down the button, the user initiates the transfer by dragging the object to its destination, which can be any OLE container. Drag and drop provides exactly the same functionality as the OLE clipboard copy and paste but adds visual feedback and eliminates the need for menus. In fact, if an application supports clipboard copy and paste, little extra is needed to support drag and drop.

During an OLE drag and drop operation, the following three separate pieces of code are used.

Drag-and-drop code source Implementation and use
IDropSource interface Implemented by the object containing the dragged data, referred to as the drag source.
IDropTarget interface Implemented by the object that is intended to accept the drop, referred to as the drop target.
DoDragDrop function Implemented by OLE and used to initiate a drag and drop operation. After the operation is in progress, it facilitates communication between the drag source and the drop target.

The IDropSource and IDropTarget interfaces can be implemented in either a container or in an object application. The role of drag source or drop target is not limited to any one type of OLE application.

The OLE function DoDragDrop implements a loop that tracks mouse and keyboard movement until such time as the drag is canceled or a drop occurs. DoDragDrop is the key function in the drag and drop process, facilitating communication between the drag source and drop target.

During a drag and drop operation, three types of feedback can be displayed to the user.

Перетаскивание 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.

Читайте также:  Hp lj100 m175 scan windows 10
Adblock
detector