Элемент управления браузера Silverlight

Реализация перемещения элементов методом "Drag-and-Drop"

С помощью обработчиков событий мыши и методов Silverlight CaptureMouse (Перехватывать события мыши) и ReleaseMouseCapture (Приостановить перехват событий мыши) можно реализовать перемещение элементов методом "drag-and-drop", или перетаскиванием, в Silverlight.

Прежде всего, давайте рассмотрим XAML-документ, содержащий несколько фигур, которые могут перемещаться по холсту методом "drag-and-drop". Обработчики событий мыши ( MouseLeftButtonDown, MouseLeftButtonUp и MouseMove ) в этих фигурах связаны с функциями onMouseDown, onMouseUp и onMouseMove, соответственно.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml" 
        Height="400" Width = "400">
  <Ellipse Canvas.Top="0" Height="10" Width="10" Fill= "Black" 
           MouseLeftButtonDown ="onMouseDown" 
           MouseLeftButtonUp="onMouseUp"
           MouseMove="onMouseMove" />
  <Ellipse Canvas.Top="20" Height="10" Width = "10" Fill= "Black" 
           MouseLeftButtonDown ="onMouseDown" 
           MouseLeftButtonUp="onMouseUp"
           MouseMove="onMouseMove"/>
  <Ellipse Canvas.Top="40" Height="10" Width = "10" Fill="Black"
           MouseLeftButtonDown ="onMouseDown"
           MouseLeftButtonUp="onMouseUp" MouseMove="onMouseMove"/>
  <Ellipse Canvas.Top="60" Height="10" Width = "10" Fill= "Black"
           MouseLeftButtonDown ="onMouseDown" 
           MouseLeftButtonUp="onMouseUp" MouseMove="onMouseMove"/>
</Canvas>

Теперь, рассмотрим каждую функцию-обработчик события в отдельности. Сначала обратимся к обработчику события MouseDown (Нажатие кнопки мыши). При перетягивании элемент управления должен "владеть" событиями мыши, таким образом, используется метод captureMouse. Также необходимо запоминать исходные точки перед перетягиванием, эта информация также будет сохраняться обработчиком события. Наконец, с помощью булевой переменной isMouseDown (кнопка мыши нажата) мы обозначаем, что кнопка мыши нажата.

var beginX;
var beginY;
var isMouseDown = false;
function onMouseDown(sender, mouseEventArgs)
{
 beginX = mouseEventArgs.getPosition(null).x;
 beginY = mouseEventArgs.getPosition(null).y;
 isMouseDown = true;
 sender.captureMouse(); 
}

Операция "drag-and-drop" заключается в перемещении элемента с помощью мыши. Поэтому, когда возникает событие MouseMove, текущие координаты курсора мыши запоминаются, чтобы затем использоваться для определения того, куда должен быть перемещен элемент.

Текущие х- и у-координаты курсора мыши получаем из объекта mouseEventArgs. В примере выполняется перетягивание объекта Ellipse, т.е. он является sender. Задать его свойства Top и Left можно, добавляя приращение координат к исходным х- и у-координатам.

Также заметьте, что событие onMouseMove будет сформировано независимо от того, выполняется ли перетягивание или нет, поэтому для проверки используется событие isMouseDown. (Помните, оно было задано в предыдущем обработчике события MouseDown.)

function onMouseMove(sender, mouseEventArgs) 
{ 
  if (isMouseDown == true) {
   var currX = mouseEventArgs.getPosition(null).x; 
   var currY = mouseEventArgs.getPosition(null).y; 
   sender["Canvas.Left"] += currX - beginX; 
   sender["Canvas.Top"] += currY - beginY; 
   beginX = currX; 
   beginY = currY; 
  } 
}

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

function onMouseUp(sender, mouseEventArgs) {
isMouseDown = false;
sender.releaseMouseCapture(); }

На рис. 6.4 показано 4 эллипса, для которых активирована возможность перемещения методом "drag-and-drop". На рис. 6.5 показано размещение этих эллипсов после перетягивания.

Рис. 6.4. Четыре эллипса, для которых активирована возможность перемещения методом "drag and drop"

Рис. 6.5. Перемещение эллипсов методом "drag and drop"

Заключение

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

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

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