Silverlight 4 新特性之Silverlight as Drop Target

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

实现步骤:

<1>: 页面布局

 
 


  
  
<StackPanel x:Name="LayoutRoot" Background="White">  

  
  
         <TextBlock Text="  "></TextBlock>  

  
  
         <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" />  

  
  
         <ScrollViewer x:Name="ImagesTarget" Background="White"  Height="360" BorderBrush="Red" 

  
  
                       VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" AllowDrop="True">  

  
  
                 <ItemsControl x:Name="ImageList" Height="353">  

  
  
                     <!--定义数据模板 支持格式是Image图片 很重要 不然会包invaid异常 数据模板确实很强大.-->  

  
  
                     <ItemsControl.ItemTemplate>  

  
  
                         <DataTemplate>  

  
  
                             <Image Source="{Binding}" Margin="5" Stretch="UniformToFill" Height="240" />  

  
  
                         </DataTemplate>  

  
  
                     </ItemsControl.ItemTemplate>  

  
  
                     <!--项排序模式Horizontal 居中-->  

  
  
                     <ItemsControl.ItemsPanel>  

  
  
                         <ItemsPanelTemplate>  

  
  
                             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>  

  
  
                         </ItemsPanelTemplate>  

  
  
                     </ItemsControl.ItemsPanel>  

  
  
                 </ItemsControl>  

  
  
             </ScrollViewer>  

  
  
     </StackPanel> 
 
 

<2>:后台实现代码

 
 


  
  
//定义存储Image集合.  

  
  
         ObservableCollection<BitmapImage> _images = new ObservableCollection<BitmapImage>();  

  
  
   

  
  
         public MainPage()  

  
  
         {  

  
  
             InitializeComponent();  

  
  
             this.Loaded += new RoutedEventHandler(MainPage_Loaded);  

  
  
         }  

  
  
   

  
  
         void MainPage_Loaded(object sender, RoutedEventArgs e)  

  
  
         {  

  
  
             //如果Image数据则直接加载进来.  

  
  
             ImageList.ItemsSource = _images;  

  
  
             ImagesTarget.Drop += new DragEventHandler(ImagesTarget_Drop);  

  
  
         }  

  
  
         void ImagesTarget_Drop(object sender, DragEventArgs e)  

  
  
         {  

  
  
             //判断拖拽数据是否存在  

  
  
             if (e.Data == null)  

  
  
             {  

  
  
                 return;  

  
  
             }  

  
  
             else 

  
  
             {  

  
  
                 //利用Fileinfo 来初始化关于文件系统日常操作io对象 Fileinfo 【】数组 意味支持多张Image同时拖拽Silverlight Application  

  
  
                 IDataObject dataObject = e.Data as IDataObject;  

  
  
                 FileInfo[] files =dataObject.GetData(DataFormats.FileDrop) as FileInfo[];  

  
  
   

  
  
                 foreach (FileInfo file in files)  

  
  
                 {  

  
  
                     try  

  
  
                     {  

  
  
                         using (var stream = file.OpenRead())  

  
  
                         {  

  
  
                             //读取拖拽中图片源.  

  
  
                             var imageSource = new BitmapImage();  

  
  
                             imageSource.SetSource(stream);  

  
  
                             //添加到集合中.  

  
  
                             _images.Add(imageSource);  

  
  
                         }  

  
  
                     }  

  
  
                     catch (Exception)  

  
  
                     {  

  
  
                         MessageBox.Show("Not a suppoted image.");  

  
  
                     }  

  
  
                 }  

  
  
             }  

  
  
         }  
 
 

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

本文转自chenkaiunion 51CTO博客，原文链接:http://blog.51cto.com/chenkai/764886