Введение в SilverLight 4: Drag and Drop
Уже две недели прошло с момента анонса SilverLight 4, а я только сел писать об этой новой потрясающей технологии. Обещаю исправиться и наверстать упущенное.
Обзор новых возможностей начнем с простого, но приятного нововведения в SilverLight 4 – поддержки технологии Drag & Drop. Естественно, речь идет ни о том, как перемещать элементы внутри самого SilverLight – приложения (это легко сделать и в первой версии), а как передать приложению внешний объект, находящийся на машине пользователя.
Чтобы продемонстрировать новые возможности, разработаем приложение, в окно которого можно перетянуть ряд изображений (в формате, поддерживаемом SilverLight) и отобразить их. Для этой цели в SilverLight 4 присутствует очень полезное свойство AllowDrop, которое доступно у любого из наследников UIElement, то есть у любого из визуальных элементов. Это означает, что перетащить внешний объект можно на любой из визуальных элементов, а не только на контейнер. Устанавливая свойство AllowDrop в значение True, разработчик инициирует работу четырех событий, которые можно использовать для реализации Drag & Drop технологии: Drop, DragEnter, DragLeave, DragOver. Основным событием является Drop, именно оно генерируется при завершении операции перетаскивания объекта. Остальные три события генерируются при перемещении курсора мыши, захватившего объект, но до завершения операции перетаскивания, то есть эти события являются вспомогательными и могут быть использованы для дополнительной визуализации процесса перетаскивания в интерфейсе (например, выделение областей, доступных для освобождения объекта, цветом).
Реализуем простой интерфейс, содержащий кнопку и панель типа Canvas. Объект на основе Canvas подходит для наших целей лучше всего, так как позволяет привязать отображаемое изображение к координатам курсора мыши.
<UserControl x:Class="DragAndDrop_Chapter0.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="printButton" Content="Print" Width="100"></Button>
<Border Grid.Row="1" x:Name="photoBorder"
BorderBrush="Blue" BorderThickness="4">
<Canvas x:Name="photoPanel" Grid.Row="1"
Background="Gray" AllowDrop="True"
Drop="photoPanel_Drop"
DragEnter="photoPanel_DragEnter"
DragLeave="photoPanel_DragLeave">
</Canvas>
</Border>
</Grid>
</UserControl>
Панель photoPanel мы будем использовать для отображения изображений, перетянутых с компьютера пользователя. Тут же мы определили свойство AllowDrop, установленное в True и указали обработчики событий.
Ниже показана реализация описанных выше обработчиков событий Drop, DragEnter, DragLeave.
private void photoPanel_Drop(object sender, DragEventArgs e)
{
photoBorder.BorderBrush = new SolidColorBrush(Colors.Blue);
IDataObject data = e.Data;
FileInfo[] files = (FileInfo [])data.GetData
(DataFormats.FileDrop);
foreach (FileInfo f in files)
{
Stream s=f.OpenRead();
BitmapImage bitmap=new BitmapImage();
bitmap.SetSource(s);
Image img = new Image();
img.Source = bitmap;
img.Width = 100;
img.Height = 80;
Point p = e.GetPosition(photoPanel);
img.Margin = new Thickness(p.X, p.Y, 0, 0);
photoPanel.Children.Add(img);
}
}
private void photoPanel_DragEnter(object sender, DragEventArgs e)
{
photoBorder.BorderBrush = new SolidColorBrush(Colors.Red);
}
private void photoPanel_DragLeave(object sender, DragEventArgs e)
{
photoBorder.BorderBrush = new SolidColorBrush(Colors.Blue);
}
Последние два события мы обрабатываем лишь с целью выделить область, доступную для размещения перетаскиваемого объекта (тут нужно помнить, что при генерации события Drop, событие DragLeave уже не сгенерируется, поэтому нужно снять выделение и в Drop). А вот обработчик события Drop делает основную работу: получение информации о передаваемых файлах, открытие потока, загрузка и отображение изображения с помощью Pixel API (одно из новшеств SilverLight 3). Чтобы сделать код более читабельным, мы не обрабатываем ошибки, связанные с типом файлов, но в реальной задаче это необходимо сделать обязательно (попробуйте в этом примере перетащить текстовый файл или офисный документ).
