天天看点

Silverlight 4 新特性之Silverlight as Drop Target

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

<a href="http://blog.51cto.com/attachment/201201/171702236.jpg" target="_blank"></a>

实现步骤:

&lt;1&gt;: 页面布局

&lt;StackPanel x:Name="LayoutRoot" Background="White"&gt;  

         &lt;TextBlock Text="  "&gt;&lt;/TextBlock&gt;  

         &lt;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" /&gt;  

         &lt;ScrollViewer x:Name="ImagesTarget" Background="White"  Height="360" BorderBrush="Red" 

                       VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" AllowDrop="True"&gt;  

                 &lt;ItemsControl x:Name="ImageList" Height="353"&gt;  

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

                     &lt;ItemsControl.ItemTemplate&gt;  

                         &lt;DataTemplate&gt;  

                             &lt;Image Source="{Binding}" Margin="5" Stretch="UniformToFill" Height="240" /&gt;  

                         &lt;/DataTemplate&gt;  

                     &lt;/ItemsControl.ItemTemplate&gt;  

                     &lt;!--项排序模式Horizontal 居中--&gt;  

                     &lt;ItemsControl.ItemsPanel&gt;  

                         &lt;ItemsPanelTemplate&gt;  

                             &lt;StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/&gt;  

                         &lt;/ItemsPanelTemplate&gt;  

                     &lt;/ItemsControl.ItemsPanel&gt;  

                 &lt;/ItemsControl&gt;  

             &lt;/ScrollViewer&gt;  

     &lt;/StackPanel&gt; 

&lt;2&gt;:后台实现代码

//定义存储Image集合.  

         ObservableCollection&lt;BitmapImage&gt; _images = new ObservableCollection&lt;BitmapImage&gt;();  

         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.");  

                 }  

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