在本实例中我们将从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. <!--这个Canvas中有鼠标左键弹起事件，以及鼠标移动事件-->
9. <Canvas x:Name="LayoutRoot" AllowDrop="True"
10. MouseLeftButtonUp="LayoutRoot_MouseLeftButtonUp"
11. MouseMove="LayoutRoot_MouseMove">
12. <!--这个是右边的ListBox，鼠标拖动的图标在这个ListBox范围内放开-->
13. <ListBox Margin="400 0 0 0" Background="AliceBlue" Height="400"
14. HorizontalAlignment="Right" Name="listBox2"
15. VerticalAlignment="Top" Width="50" >
16. <ListBox.ItemTemplate>
17. <DataTemplate>
18. <StackPanel Width="40" Height="40">
19. <Border BorderThickness="1">
20. <Image Source="{Binding IcoImage}" Width="30"
21. Height="30" Margin="0,5,6,0"
22. Tag="{Binding IcoName}"
23. HorizontalAlignment="Center" />
24. </Border>
25. </StackPanel>
26. </DataTemplate>
27. </ListBox.ItemTemplate>
28. </ListBox>
29. <!--这个是左边的ListBox，鼠标将从此ListBox拖出图标-->
30. <ListBox Name="listBox1" Background="AliceBlue" Width="50"
31. HorizontalAlignment="Left" VerticalAlignment="Top"
32. Height="400" >
33. <ListBox.ItemTemplate>
34. <DataTemplate>
35. <StackPanel Width="40" Height="40">
36. <Border BorderThickness="1">
37. <Image Source="{Binding IcoImage}" Width="30"
38. Height="30" Margin="0,5,6,0"
39. Tag="{Binding IcoName}"
40. MouseLeftButtonDown="Image_MouseLeftButtonDown"
41. HorizontalAlignment="Center" />
42. </Border>
43. </StackPanel>
44. </DataTemplate>
45. </ListBox.ItemTemplate>
46. </ListBox>
47. <!--这个在鼠标拖动过程中显示的图标-->
48. <Image Name="Img" Opacity="0.5" Width="30" Height="30"
49. Margin="0,5,6,0" Visibility="Collapsed" HorizontalAlignment="Center" />
50. </Canvas>
51. </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. namespace SL5Drag
18. {
19. public partial class MainPage : UserControl
20. {
21. public MainPage()
22. {
23. InitializeComponent();
24. //设置左边的ListBox显示的内容项
25. this.listBox1.ItemsSource = IphoneIco.instance.getIphoneIcoList();
26. string s = string.Empty;
27. }
28. List<IphoneIco> iphoneList;
29. /// <summary>
30. /// 标示是否按下鼠标左键
31. /// </summary>
32. bool leftMouseflag = false;
33. /// <summary>
34. /// 右边ListBox的结果集合
35. /// </summary>
36. private static List<IphoneIco> AddiphoneList = new List<IphoneIco>();
37. /// <summary>
38. /// 左边ListBox的结果集合
39. /// </summary>
40. public List<IphoneIco> IphoneList
41. {
42. get { return iphoneList; }
43. set { iphoneList = value; }
44. }
45. private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
46. {
47. //鼠标在ListBox中按下准备拖出图片的时候，设置leftMouseflag为true，并且设置Image为可见
48. leftMouseflag = true;
49. Image p_w_picpath=sender as Image;
50. this.Img.Source = p_w_picpath.Source;
51. Point point = e.GetPosition(null);
52. this.Img.SetValue(Canvas.LeftProperty, point.X );
53. this.Img.SetValue(Canvas.TopProperty, point.Y - 5.0);
54. this.Img.Visibility = Visibility.Visible;
55. }
56. private void LayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
57. {
58. //如果得知鼠标左键松动的位置是右边的ListBox上时则为右边的ListBox添加一列
59. Point point =e.GetPosition(null);
60. if (point.X > 400 && point.X < 450 && point.Y < 400&& leftMouseflag == true )
61. {
62. BitmapImage bimg = this.Img.Source as BitmapImage;
63. this.Img.Visibility = Visibility.Collapsed;
64. AddiphoneList.Add(new IphoneIco()
65. {
66. IcoName = "2",
67. IcoImage = bimg
68. });
69. this.listBox2.ItemsSource = null;
70. this.listBox2.ItemsSource = AddiphoneList;
71. }
72. else
73. {
74. this.Img.Visibility = Visibility.Collapsed;
75. this.Img.Source = null;
76. }
77. leftMouseflag = false;
78. }
79. private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
80. {
81. //让图片跟随鼠标的移动而移动
82. Point point = e.GetPosition(null);
83. this.Img.SetValue(Canvas.LeftProperty, point.X);
84. this.Img.SetValue(Canvas.TopProperty, point.Y-5.0);
85. }
86. }
87. }

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