Silverlight 4 新特性之Silverlight as Drop Target

在上次项目中写过多篇关于拖拽的实现. 这些拖拽都是控件之间的效果. Silverlight 4 中我们甚至可以直接把文件系统中文件拖拽到Silverlight Application中承载. 这就是 silverlight 4中新特性Silverlight As Drop Target 支持这一点. 为了达到演示目的. 使用桌面图片拖拽到Silverlight Application中ScrollViewer动态显示. 先体验一下[你可以尝试从本地文件系统直接拖拽图片到这个Silverlight Application中看一下效果]:

 

实现步骤:

<1>: 页面布局

 1  <StackPanel x:Name="LayoutRoot" Background="White">
 2         <TextBlock Text="  "></TextBlock>
 3         <TextBlock Text="Silverlight AS Drop target.-chenkai[10.6.28]" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="16" Foreground="Red"  FontFamily="Comic Sans MS" FontWeight="BOld" Height="25" Width="655" />
 4         <ScrollViewer x:Name="ImagesTarget" Background="White"  Height="360" BorderBrush="Red"
 5                       VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" AllowDrop="True">
 6                 <ItemsControl x:Name="ImageList" Height="353">
 7                     <!--定义数据模板 支持格式是Image图片 很重要 不然会包invaid异常 数据模板确实很强大.-->
 8                     <ItemsControl.ItemTemplate>
 9                         <DataTemplate>
10                             <Image Source="{Binding}" Margin="5" Stretch="UniformToFill" Height="240" />
11                         </DataTemplate>
12                     </ItemsControl.ItemTemplate>
13                     <!--项排序模式Horizontal 居中-->
14                     <ItemsControl.ItemsPanel>
15                         <ItemsPanelTemplate>
16                             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
17                         </ItemsPanelTemplate>
18                     </ItemsControl.ItemsPanel>
19                 </ItemsControl>
20             </ScrollViewer>
21     </StackPanel>

<2>:后台实现代码

 1  //定义存储Image集合.
 2         ObservableCollection<BitmapImage> _images = new ObservableCollection<BitmapImage>();
 3 
 4         public MainPage()
 5         {
 6             InitializeComponent();
 7             this.Loaded += new RoutedEventHandler(MainPage_Loaded);
 8         }
 9 
10         void MainPage_Loaded(object sender, RoutedEventArgs e)
11         {
12             //如果Image数据则直接加载进来.
13             ImageList.ItemsSource = _images;
14             ImagesTarget.Drop += new DragEventHandler(ImagesTarget_Drop);
15         }
16 
17         void ImagesTarget_Drop(object sender, DragEventArgs e)
18         {
19             //判断拖拽数据是否存在
20             if (e.Data == null)
21             {
22                 return;
23             }
24             else
25             {
26                 //利用Fileinfo 来初始化关于文件系统日常操作io对象 Fileinfo 【】数组 意味支持多张Image同时拖拽Silverlight Application
27                 IDataObject dataObject = e.Data as IDataObject;
28                 FileInfo[] files =dataObject.GetData(DataFormats.FileDrop) as FileInfo[];
29 
30                 foreach (FileInfo file in files)
31                 {
32                     try
33                     {
34                         using (var stream = file.OpenRead())
35                         {
36                             //读取拖拽中图片源.
37                             var imageSource = new BitmapImage();
38                             imageSource.SetSource(stream);
39                             //添加到集合中.
40                             _images.Add(imageSource);
41                         }
42                     }
43                     catch (Exception)
44                     {
45                         MessageBox.Show("Not a suppoted image.");
46                     }
47                 }
48             }
49         }

因为前台ScrollView中DataTemplate中定义格式是Image绑定. 后台数据源用到ObservableCollection<BitmapImage>来封装从拖拽中得到图片数据. 另外一个就是FileInfo,提供创建、复制、删除、移动和打开文件的实例方法，并且帮助创建 FileStream 对象, 既然通过Fileinfo得到FileStream对象 其他操作就是平常IO操作. 而Fileinfo[]数组则是用来支持同时拖拽多个对象.关于Fileinfo 更多详细资料请参见MSDN.