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
}

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

< 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 >

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

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 );
}
}
}

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