Silverlight实用窍门系列：43.Silverlight从ListBox拖拽图标到另一ListBox【附带源码实例】

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

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

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

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

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

public class IphoneIco
 {
 #region 字段

 string icoName;
 BitmapImage icoImage;

 #endregion

 #region 属性

 /// <summary>
 /// 图标名称
 /// </summary>
 public string IcoName
 {
 get { return icoName; }
 set { icoName = value; }
 }

 /// <summary>
 /// 图标图像
 /// </summary>
 public BitmapImage IcoImage
 {
 get { return icoImage; }
 set { icoImage = value; }
 }

 #endregion

 #region 单一实例

 public static readonly IphoneIco instance = new IphoneIco();

 #endregion

 #region 公共方法

 public List<IphoneIco> getIphoneIcoList()
 {
 List<IphoneIco> iphoneIcoList = new List<IphoneIco>()
 {
 new IphoneIco(){ IcoName="1", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/1.png",UriKind.RelativeOrAbsolute))},
 new IphoneIco(){ IcoName="2", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/2.png",UriKind.RelativeOrAbsolute))},
 new IphoneIco(){ IcoName="3", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/3.png",UriKind.RelativeOrAbsolute))},
 new IphoneIco(){ IcoName="4", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/4.png",UriKind.RelativeOrAbsolute))},
 new IphoneIco(){ IcoName="5", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/5.png",UriKind.RelativeOrAbsolute))},
 new IphoneIco(){ IcoName="6", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/6.png",UriKind.RelativeOrAbsolute))},
 new IphoneIco(){ IcoName="7", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/7.png",UriKind.RelativeOrAbsolute))},
 new IphoneIco(){ IcoName="8", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/8.png",UriKind.RelativeOrAbsolute))}
 };
 return iphoneIcoList;
 }

 #endregion
 }

<UserControl x:Class="SL5Drag.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 d:DesignHeight="400" d:DesignWidth="500">

 <!--这个Canvas中有鼠标左键弹起事件，以及鼠标移动事件-->
 <Canvas x:Name="LayoutRoot" AllowDrop="True"
 MouseLeftButtonUp="LayoutRoot_MouseLeftButtonUp"
 MouseMove="LayoutRoot_MouseMove">
 <!--这个是右边的ListBox，鼠标拖动的图标在这个ListBox范围内放开-->
 <ListBox Margin="400 0 0 0" Background="AliceBlue" Height="400"
 HorizontalAlignment="Right" Name="listBox2"
 VerticalAlignment="Top" Width="50" >
 <ListBox.ItemTemplate>
 <DataTemplate>
 <StackPanel Width="40" Height="40">
 <Border BorderThickness="1">
 <Image Source="{Binding IcoImage}" Width="30" 
 Height="30" Margin="0,5,6,0" 
 Tag="{Binding IcoName}" 
 HorizontalAlignment="Center" />
 </Border>
 </StackPanel>
 </DataTemplate>
 </ListBox.ItemTemplate>
 </ListBox>
 <!--这个是左边的ListBox，鼠标将从此ListBox拖出图标-->
 <ListBox Name="listBox1" Background="AliceBlue" Width="50" 
 HorizontalAlignment="Left" VerticalAlignment="Top" 
 Height="400" >
 <ListBox.ItemTemplate>
 <DataTemplate>
 <StackPanel Width="40" Height="40">
 <Border BorderThickness="1">
 <Image Source="{Binding IcoImage}" Width="30" 
 Height="30" Margin="0,5,6,0"
 Tag="{Binding IcoName}" 
 MouseLeftButtonDown="Image_MouseLeftButtonDown"
 HorizontalAlignment="Center" />
 </Border>
 </StackPanel>
 </DataTemplate>
 </ListBox.ItemTemplate>
 </ListBox>
 <!--这个在鼠标拖动过程中显示的图标-->
 <Image Name="Img" Opacity="0.5" Width="30" Height="30"
 Margin="0,5,6,0" Visibility="Collapsed" HorizontalAlignment="Center" />

 </Canvas>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;
using Microsoft.Expression.Interactivity;
using Microsoft.Expression.Interactivity.Layout;
using System.Windows.Media.Imaging;
using System.ComponentModel;

namespace SL5Drag
{
 public partial class MainPage : UserControl
 {
 public MainPage()
 {

 InitializeComponent();
 //设置左边的ListBox显示的内容项
 this.listBox1.ItemsSource = IphoneIco.instance.getIphoneIcoList();
 string s = string.Empty;
 }
 List<IphoneIco> iphoneList;

 /// <summary>
 /// 标示是否按下鼠标左键
 /// </summary>
 bool leftMouseflag = false;

 /// <summary>
 /// 右边ListBox的结果集合
 /// </summary>
 private static List<IphoneIco> AddiphoneList = new List<IphoneIco>();

 /// <summary>
 /// 左边ListBox的结果集合
 /// </summary>
 public List<IphoneIco> IphoneList
 {
 get { return iphoneList; }
 set { iphoneList = value; }
 }


 private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 //鼠标在ListBox中按下准备拖出图片的时候，设置leftMouseflag为true，并且设置Image为可见
 leftMouseflag = true;
 Image image=sender as Image;
 this.Img.Source = image.Source;
 Point point = e.GetPosition(null);
 this.Img.SetValue(Canvas.LeftProperty, point.X );
 this.Img.SetValue(Canvas.TopProperty, point.Y - 5.0);
 this.Img.Visibility = Visibility.Visible;
 }


 private void LayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
 {

 //如果得知鼠标左键松动的位置是右边的ListBox上时则为右边的ListBox添加一列
 Point point =e.GetPosition(null);

 if (point.X > 400 && point.X < 450 && point.Y < 400&& leftMouseflag == true )
 {
 BitmapImage bimg = this.Img.Source as BitmapImage;
 this.Img.Visibility = Visibility.Collapsed;
 AddiphoneList.Add(new IphoneIco()
 {
 IcoName = "2",
 IcoImage = bimg
 });
 this.listBox2.ItemsSource = null;
 this.listBox2.ItemsSource = AddiphoneList;
 }
 else
 {
 this.Img.Visibility = Visibility.Collapsed;
 this.Img.Source = null;
 }
 leftMouseflag = false;
 }

 private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
 {
 //让图片跟随鼠标的移动而移动
 Point point = e.GetPosition(null);
 this.Img.SetValue(Canvas.LeftProperty, point.X);
 this.Img.SetValue(Canvas.TopProperty, point.Y-5.0);
 }
 }
}