Silverlight实用窍门系列：43.Silverlight从ListBox拖拽图标到另一ListBox

        在本实例中我们将从ListBox中拖出一个图标到另外一个ListBox中，这是一个比较有用的小功能，在这里我们首先来看运行效果（点击下面的图片即可拖动左边的图标到右边的ListBox中去）。

        实现过程是：1、我们把这个过程分为鼠标左键点击到左边的图标，使用Image_MouseLeftButtonDown事件。（设置一个标识符，标示当前已经被鼠标点击下去）

　　　　　　　　  2、点击到这个图标不放，在整个Canvas内移动，使用LayoutRoot_MouseMove事件（此时设置一个图标跟随鼠标的位置移动，这个图标既是被点击的图标）。

　　　　　　　　  3、当鼠标移动到右边的ListBox范围之内时放开鼠标左键，使用LayoutRoot_MouseLeftButtonUp事件（当鼠标左键弹起的时 候，判断标识符是否为true，如果是的话表示有图标被拖动，并且判断此时的鼠标位置是否在右边的ListBox范围之内，如果是则将被拖动的图标放入右 边的ListBox中）　

        首先我们添加8张图片素材，然后编写一个类来获取图片列表，其CS代码如下：

        然后我们来看MainPage.xaml中的代码，向其中添加两个ListBox以及Image图标，其代码如下：

1. <UserControl x:Class="SL5Drag.MainPage" 
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
6. mc:Ignorable="d" 
7. d:DesignHeight="400" d:DesignWidth="500"> 
8.  
9. <!--这个Canvas中有鼠标左键弹起事件，以及鼠标移动事件--> 
10. <Canvas x:Name="LayoutRoot" AllowDrop="True" 
11. MouseLeftButtonUp="LayoutRoot_MouseLeftButtonUp" 
12. MouseMove="LayoutRoot_MouseMove"> 
13. <!--这个是右边的ListBox，鼠标拖动的图标在这个ListBox范围内放开--> 
14. <ListBox Margin="400 0 0 0" Background="AliceBlue" Height="400" 
15. HorizontalAlignment="Right" Name="listBox2" 
16. VerticalAlignment="Top" Width="50" > 
17. <ListBox.ItemTemplate> 
18. <DataTemplate> 
19. <StackPanel Width="40" Height="40"> 
20. <Border BorderThickness="1"> 
21. <Image Source="{Binding IcoImage}" Width="30" 
22. Height="30" Margin="0,5,6,0" 
23. Tag="{Binding IcoName}" 
24. HorizontalAlignment="Center" /> 
25. </Border> 
26. </StackPanel> 
27. </DataTemplate> 
28. </ListBox.ItemTemplate> 
29. </ListBox> 
30. <!--这个是左边的ListBox，鼠标将从此ListBox拖出图标--> 
31. <ListBox Name="listBox1" Background="AliceBlue" Width="50" 
32. HorizontalAlignment="Left" VerticalAlignment="Top" 
33. Height="400" > 
34. <ListBox.ItemTemplate> 
35. <DataTemplate> 
36. <StackPanel Width="40" Height="40"> 
37. <Border BorderThickness="1"> 
38. <Image Source="{Binding IcoImage}" Width="30" 
39. Height="30" Margin="0,5,6,0" 
40. Tag="{Binding IcoName}" 
41. MouseLeftButtonDown="Image_MouseLeftButtonDown" 
42. HorizontalAlignment="Center" /> 
43. </Border> 
44. </StackPanel> 
45. </DataTemplate> 
46. </ListBox.ItemTemplate> 
47. </ListBox> 
48. <!--这个在鼠标拖动过程中显示的图标--> 
49. <Image Name="Img" Opacity="0.5" Width="30" Height="30" 
50. Margin="0,5,6,0" Visibility="Collapsed" HorizontalAlignment="Center" /> 
51.  
52. </Canvas> 
53. </UserControl> 

        最后我们来看MainPage.xaml.cs代码，其中有相关的逻辑控制在注释中已注明：

1. using System; 
2. using System.Collections.Generic; 
3. using System.Linq; 
4. using System.Net; 
5. using System.Windows; 
6. using System.Windows.Controls; 
7. using System.Windows.Documents; 
8. using System.Windows.Input; 
9. using System.Windows.Media; 
10. using System.Windows.Media.Animation; 
11. using System.Windows.Shapes; 
12. using System.Windows.Interactivity; 
13. using Microsoft.Expression.Interactivity; 
14. using Microsoft.Expression.Interactivity.Layout; 
15. using System.Windows.Media.Imaging; 
16. using System.ComponentModel; 
17.  
18. namespace SL5Drag 
19. { 
20. public partial class MainPage : UserControl 
21. { 
22. public MainPage() 
23. { 
24.  
25. InitializeComponent(); 
26. //设置左边的ListBox显示的内容项 
27. this.listBox1.ItemsSource = IphoneIco.instance.getIphoneIcoList(); 
28. string s = string.Empty; 
29. } 
30. List<IphoneIco> iphoneList; 
31.  
32. /// <summary> 
33. /// 标示是否按下鼠标左键 
34. /// </summary> 
35. bool leftMouseflag = false; 
36.  
37. /// <summary> 
38. /// 右边ListBox的结果集合 
39. /// </summary> 
40. private static List<IphoneIco> AddiphoneList = new List<IphoneIco>(); 
41.  
42. /// <summary> 
43. /// 左边ListBox的结果集合 
44. /// </summary> 
45. public List<IphoneIco> IphoneList 
46. { 
47. get { return iphoneList; } 
48. set { iphoneList = value; } 
49. } 
50.  
51. private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
52. { 
53. //鼠标在ListBox中按下准备拖出图片的时候，设置leftMouseflag为true，并且设置Image为可见 
54. leftMouseflag = true; 
55. Image image=sender as Image; 
56. this.Img.Source = image.Source; 
57. Point point = e.GetPosition(null); 
58. this.Img.SetValue(Canvas.LeftProperty, point.X ); 
59. this.Img.SetValue(Canvas.TopProperty, point.Y - 5.0); 
60. this.Img.Visibility = Visibility.Visible; 
61. } 
62.  
63. private void LayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
64. { 
65.  
66. //如果得知鼠标左键松动的位置是右边的ListBox上时则为右边的ListBox添加一列 
67. Point point =e.GetPosition(null); 
68.  
69. if (point.X > 400 && point.X < 450 && point.Y < 400&& leftMouseflag == true ) 
70. { 
71. BitmapImage bimg = this.Img.Source as BitmapImage; 
72. this.Img.Visibility = Visibility.Collapsed; 
73. AddiphoneList.Add(new IphoneIco() 
74. { 
75. IcoName = "2", 
76. IcoImage = bimg 
77. }); 
78. this.listBox2.ItemsSource = null; 
79. this.listBox2.ItemsSource = AddiphoneList; 
80. } 
81. else 
82. { 
83. this.Img.Visibility = Visibility.Collapsed; 
84. this.Img.Source = null; 
85. } 
86. leftMouseflag = false; 
87. } 
88.  
89. private void LayoutRoot_MouseMove(object sender, MouseEventArgs e) 
90. { 
91. //让图片跟随鼠标的移动而移动 
92. Point point = e.GetPosition(null); 
93. this.Img.SetValue(Canvas.LeftProperty, point.X); 
94. this.Img.SetValue(Canvas.TopProperty, point.Y-5.0); 
95. } 
96. } 
97. } 

        本实例采用VS2010+Silverlight 4.0编写，如需源码请点击 SL4Drag.zip 下载。

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/826456