Пошаговое руководство. Включение перетаскивания для пользовательского элемента управления

В этом пошаговом руководстве демонстрируется создание пользовательского элемента управления, который участвует в передаче данных с помощью перетаскивания в Windows Presentation Foundation (WPF).

В пошаговом руководстве создается пользовательский элемент управления WPF UserControl, который представляет круг. В этом элементе управления реализуется функциональность, поддерживающая передачу данных посредством перетаскивания. Например, при перетаскивании из одного элемента управления Circle в другой данные цвета Fill копируются из исходного круга в целевой круг. При перетаскивании из одного элемента управления Circle в элемент управления TextBox данные цвета Fill копируются в элемент управления TextBox. Также будет создано небольшое приложение, которое содержит два элемента управления панели и элемент управления TextBox для тестирования функции перетаскивания. Будет написан код, который обеспечивает обработку перетаскиваемых данных круга панелями, что, в свою очередь, позволяет перемещать или копировать круги из дочерней коллекции одной панели в другую панель.

В данном пошаговом руководстве рассмотрены следующие задачи:

• Создание пользовательского элемента управления.

• Настройка пользовательского элемента управления в качестве источника перетаскивания.

• Настройка пользовательского элемента управления в качестве объекта-приемника.

• Настройка панели для получения данных, перетащенных из пользовательского элемента управления.

Предварительные требования

Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.

• Visual Studio 2010

Создание проекта приложения

В этом разделе создается инфраструктура приложения, которая включает главную страницу с двумя панелями и элементом управления TextBox.

Создание проекта

1. Создайте новый проект приложения WPF на языке Visual Basic или Visual C# с именем DragDropExample. Дополнительные сведения см. в разделе Практическое руководство. Создание нового проекта приложения WPF.

2. Откройте файл MainWindow.xaml.

3. Добавьте следующую разметку между открывающим и закрывающим тегами Grid.

   Данная разметка создает пользовательский интерфейс для тестового приложения.

Добавление нового пользовательского элемента управления в проект

В этом разделе в проект добавляется новый пользовательский элемент управления.

Добавление нового пользовательского элемента управления

1. В меню "Проект" выберите команду Добавить пользовательский элемент управления.

2. В диалоговом окне "Добавление нового элемента" измените имя на Circle.xaml и нажмите кнопку Добавить.

   В проект добавляется файл Circle.xaml и его код программной части.

3. Откройте файл Circle.xaml.

   Этот файл будет содержать элементы пользовательского интерфейса пользовательского элемента управления.

4. Добавьте следующую разметку в корневой элемент Grid, чтобы создать простой пользовательский элемент управления, содержащий синий круг в качестве своего пользовательского интерфейса.

5. Откройте файл Circle.xaml.cs или Circle.xaml.vb.

6. В C# добавьте следующий код после конструктора по умолчанию, чтобы создать конструктор копий. В Visual Basic добавьте следующий код для создания конструктора по умолчанию и конструктора копий.

   Чтобы обеспечить возможность копирования пользовательского элемента управления, метод конструктора копий добавляется в файл кода программной части. В упрощенном пользовательском элементе управления Circle копируются только свойство Fill и размер пользовательского элемента управления.

Добавление пользовательского элемента управления в главное окно

1. Откройте файл MainWindow.xaml.

2. Добавьте следующий код XAML в открывающий тег Window, чтобы создать ссылку на пространство имен XML для текущего приложения.

   xmlns:local="clr-namespace:DragDropExample"
   

3. В первом элементе управления StackPanel добавьте следующий код XAML, чтобы создать два экземпляра пользовательского элемента управления Circle в первую панель.

   Полный код XAML для панели выглядит следующим образом.

Реализация событий источника перетаскивания в пользовательском элементе управления

В этом разделе переопределяется метод OnMouseMove и инициируется операция перетаскивания.

В момент начала перетаскивания (после нажатия кнопки мыши и перемещения мыши) передаваемые данные упаковываются в объект DataObject. В этом случае элемент управления Circle упаковывает три элемента данных: строковое представление цвета Fill, представление своей высоты в виде числа двойной точности и копию себя самого.

Инициирование операции перетаскивания

1. Откройте файл Circle.xaml.cs или Circle.xaml.vb.

2. Добавьте следующий переопределенный метод OnMouseMove, чтобы обеспечить обработку событий MouseMove в классе.

   Переопределенный метод OnMouseMove выполняет следующие задачи.

   • Проверяет, нажата ли левая кнопка мыши при перемещении мыши.

   • Упаковывает данные Circle в объект DataObject. В этом случае элемент управления Circle упаковывает три элемента данных: строковое представление цвета Fill, представление своей высоты в виде числа двойной точности и копию себя самого.

   • Вызывает статический метод DragDrop.DoDragDrop для инициирования операции перетаскивания. В метод DoDragDrop передаются следующие три параметра.

     • dragSource— ссылка на этот элемент управления.

     • data — объект DataObject, созданный в предыдущем коде.

     • allowedEffects — разрешенные операции перетаскивания: Copy и Move.

3. Нажмите клавишу F5 для построения и запуска приложения.

4. Щелкните один из элементов управления Circle и перетащите его над панелями, другим элементом управления Circle и элементом управления TextBox. При перетаскивании над элементом управления TextBox курсор изменяется для обозначения перемещения.

5. При перетаскивании элемента управления Circle над элементом управления TextBox нажмите клавишу CTRL. Обратите внимание на изменение курсора, который теперь обозначает копирование.

6. Перетащите элемент управления Circle в элемент управления TextBox. К элементу управления TextBox добавляется строковое представление цвета заливки элемента управления Circle.

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

Предоставление обратной связи пользователю

1. Откройте файл Circle.xaml.cs или Circle.xaml.vb.

2. Добавьте следующий переопределенный метод OnGiveFeedback, чтобы обеспечить обработку событий GiveFeedback в классе.

   Переопределенный метод OnGiveFeedback выполняет следующие задачи.

   • Проверяет значения свойства Effects, заданные в обработчике событий DragOver объекта-приемника.

   • Задает пользовательский курсор на основе значения Effects. Курсор предназначен для предоставления пользователю визуальной информации о последствиях, которые будет иметь перетаскивание данных.

3. Нажмите клавишу F5 для построения и запуска приложения.

4. Перетащите один из элементов управления Circle над панелями, другим элементом управления Circle и элементом управления TextBox. Обратите внимание, что теперь отображаются пользовательские курсоры, заданные в переопределенном методе OnGiveFeedback.

5. Выберите текст green в элементе управления TextBox.

6. Перетащите текст green в элемент управления Circle. Обратите внимание, что отображаются курсоры по умолчанию, которые указывают на последствия операции перетаскивания. Курсор обратной связи всегда задается источником перетаскивания.

Реализация событий объекта-приемника в пользовательском элементе управления

В этом разделе указывается, что пользовательский элемент управления является объектом-приемником, переопределяются методы, которые позволяют пользовательскому элементу управления функционировать в качестве объекта-приемника, и обрабатываются перетащенные в объект-приемник данные.

Настройка пользовательского элемента управления в качестве объекта-приемника

1. Откройте файл Circle.xaml.

2. В открывающем теге UserControl добавьте свойство AllowDrop и задайте для него значение true.

Если для свойства AllowDrop задано значение true, то при перетаскивании данных из источника перетаскивания в пользовательский элемент управления Circle вызывается метод OnDrop. В этом методе перетащенные данные обрабатываются и применяются к элементу управления Circle.

Обработка перетащенных данных

1. Откройте файл Circle.xaml.cs или Circle.xaml.vb.

2. Добавьте следующий переопределенный метод OnDrop, чтобы обеспечить обработку событий Drop в классе.

   Переопределенный метод OnDrop выполняет следующие задачи.

   • Проверяет, содержат ли перетащенные данные строковый объект, используя метод GetDataPresent.

   • При наличии строковых данных извлекает их с помощью метода GetData.

   • Пытается преобразовать строку в объект Brush, используя метод BrushConverter.

   • В случае успешного завершения преобразования применяет кисть к свойству Fill объекта Ellipse, который предоставляет пользовательский интерфейс элемента управления Circle.

   • Помечает событие Drop как обработанное. Событие сброса необходимо пометить как обработанное для оповещения других получающих это событие элементов, что оно уже обработано элементом управления Circle.

3. Нажмите клавишу F5 для построения и запуска приложения.

4. Выберите текст green в элементе управления TextBox.

5. Перетащите текст в элемент управления Circle и сбросьте его. Цвет элемента управления Circle изменится с синего на зеленый.

6. Введите текст green в элементе управления TextBox.

7. Выберите текст gre в элементе управления TextBox.

8. Перетащите текст в элемент управления Circle и сбросьте его. Обратите внимание, что курсор изменяется для обозначения допустимости перетаскивания, однако цвет элемента управления Circle не изменяется, поскольку gre не является допустимым цветом.

9. Перетащите из зеленого элемента управления Circle в синий элемент управления Circle. Цвет элемента управления Circle изменится с синего на зеленый. Обратите внимание, что отображаемый курсор зависит от того, какой элемент управления является источником перетаскивания — TextBox или Circle.

Чтобы сделать элемент объектом-приемником, достаточно задать для его свойства AllowDrop значение true и обработать перетащенные данные. Однако для повышения удобства использования необходимо также обработать события DragEnter, DragLeave и DragOver. В этих событиях перед сбрасыванием данных можно выполнить проверки и предоставить пользователю дополнительную обратную связь.

Когда данные перетаскиваются над пользовательским элементом управления Circle, этот элемент управления должен уведомить источник перетаскивания, может ли он обработать перетаскиваемые данные. Если элементу управления не известно, как обработать данные, он должен отклонить перетаскивание. Для этого обрабатывается событие DragOver и задается свойство Effects.

Проверка допустимости перетаскивания данных

1. Откройте файл Circle.xaml.cs или Circle.xaml.vb.

2. Добавьте следующий переопределенный метод OnDragOver, чтобы обеспечить обработку событий DragOver в классе.

   Переопределенный метод OnDragOver выполняет следующие задачи.

   • Присваивает свойству Effects значение None.

   • Выполняет те же проверки, которые выполнялись методом OnDrop, чтобы определить, может ли пользовательский элемент управления Circle обработать перетащенные данные.

   • Если пользовательский элемент управления может обработать данные, свойству Effects задается значение Copy или Move.

3. Нажмите клавишу F5 для построения и запуска приложения.

4. Выберите текст gre в элементе управления TextBox.

5. Перетащите текст в элемент управления Circle. Обратите внимание, что теперь курсор изменяется для обозначения недопустимости перетаскивания, поскольку gre не является допустимым цветом.

Можно еще больше расширить взаимодействие с пользователем, применив предварительный просмотр к операции перетаскивания. Для пользовательского элемента управления Circle будут переопределены методы OnDragEnter и OnDragLeave. Когда данные перетаскиваются над элементом управления, текущий фон Fill сохраняется в переменной-заполнителе. Затем строка преобразуется в кисть и применяется к объекту Ellipse, который предоставляет пользовательский интерфейс элемента управления Circle. Если данные перетаскиваются за пределы элемента управления Circle без их сбрасывания, к элементу управления Circle вновь применяется исходное значение свойства Fill.

Предварительный просмотр последствий операции перетаскивания

1. Откройте файл Circle.xaml.cs или Circle.xaml.vb.

2. В классе Circle объявите закрытую переменную Brush с именем _previousFill и инициализируйте ее значением null.

3. Добавьте следующий переопределенный метод OnDragEnter, чтобы обеспечить обработку событий DragEnter в классе.

   Переопределенный метод OnDragEnter выполняет следующие задачи.

   • Сохраняет значение свойства Fill объекта Ellipse в переменной _previousFill.

   • Выполняет те же проверки, которые выполнялись методом OnDrop, чтобы определить, можно ли преобразовать данные в объект Brush.

   • Если данные преобразуются в допустимый объект Brush, этот объект применяется к свойству Fill объекта Ellipse.

4. Добавьте следующий переопределенный метод OnDragLeave, чтобы обеспечить обработку событий DragLeave в классе.

   Переопределенный метод OnDragLeave выполняет следующие задачи.

   • Применяет объект Brush, сохраненный в переменной _previousFill, к свойству Fill объекта Ellipse, который предоставляет пользовательский интерфейс пользовательского элемента управления Circle.

5. Нажмите клавишу F5 для построения и запуска приложения.

6. Выберите текст green в элементе управления TextBox.

7. Перетащите текст над элементом управления Circle без его сбрасывания. Цвет элемента управления Circle изменится с синего на зеленый.

8. Перетащите текст за границы элемента управления Circle. Цвет элемента управления Circle изменится с зеленого обратно на синий.

Настройка панели для получения перетащенных данных

В этом разделе панели, в которых размещаются пользовательские элементы управления Circle, настраиваются для функционирования в качестве объектов-приемников перетащенных данных Circle. Будет реализован код, которые позволяет перемещать элемент управления Circle из одной панели в другую и создавать копию элемента управления Circle, удерживая клавишу CTRL во время перетаскивания Circle.

Настройка панели в качестве объекта-приемника

1. Откройте файл MainWindow.xaml.

2. В каждом элементе управления StackPanel добавьте обработчики событий DragOver и Drop, как показано в следующем коде XAML. Присвойте обработчику событий DragOver имя panel_DragOver, а обработчику событий Drop имя panel_Drop.

3. Откройте файл MainWindows.xaml.cs или MainWindow.xaml.vb.

4. В обработчик события DragOver добавьте следующий код.

   Обработчик событий DragOver выполняет следующие задачи.

   • Проверяет, действительно ли перетаскиваемые данные содержат данные "Object", которые были упакованы в объект DataObject пользовательским элементом управления Circle и переданы в вызванный метод DoDragDrop.

   • При наличии данных "Object" проверяет, нажата ли клавиша CTRL.

   • Если клавиша CTRL нажата, задает свойству Effects значение Copy. В противном случае задает свойству Effects значение Move.

5. В обработчик события Drop добавьте следующий код.

   Обработчик событий Drop выполняет следующие задачи.

   • Проверяет, обработано ли событие Drop. Например, если элемент управления Circle перетащен на другой элемент управления Circle, который обрабатывает событие Drop, панели, содержащей этот элемент управления, не требуется повторно обрабатывать событие.

   • Если событие Drop не обработано, проверяет, нажата ли клавиша CTRL.

   • Если при возникновении события Drop клавиша CTRL нажата, обработчик создает копию элемента управления Circle и добавляет его в коллекцию Children элемента управления StackPanel.

   • Если клавиша CTRL не нажата, обработчик перемещает элемент управления Circle из коллекции Children его родительской панели в коллекцию Children панели, в которую перетаскивается элемент управления.

   • Задает значение свойства Effects, чтобы уведомить метод DoDragDrop, какая операция была выполнена — копирование или перетаскивание.

6. Нажмите клавишу F5 для построения и запуска приложения.

7. Выберите текст green в элементе управления TextBox.

8. Перетащите текст над элементом управления Circle и сбросьте его.

9. Перетащите элемент управления Circle из левой панели в правую панель. Элемент управления Circle удаляется из коллекции Children левой панели и добавляется в коллекцию Children правой панели.

10. Перетащите элемент управления Circle из панели, в которой он находится, в другую панель, удерживая клавишу CTRL. Элемент управления Circle копируется, и его копия добавляется в коллекцию Children принимающей панели.

См. также

Основные понятия

Общие сведения о перетаскивании

Журнал изменений

Дата	Журнал	Причина
Апрель 2011	Добавлен раздел.	Обратная связь от клиента.