Silverlight 4 新特性之Silverlight as Drop Target
2010-06-28 19:01 chenkai 阅读(1168) 评论(5) 编辑 收藏 举报在上次项目中写过多篇关于拖拽的实现. 这些拖拽都是控件之间的效果. 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 <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>:后台实现代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
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.