Silverlight实用窍门系列：43.Silverlight从ListBox拖拽图标到另一ListBox【附带源码实例】
在本实例中我们将从ListBox中拖出一个图标到另外一个ListBox中，这是一个比较有用的小功能，在这里我们首先来看运行效果（点击下面的图片即可拖动左边的图标到右边的ListBox中去）。
实现过程是：1、我们把这个过程分为鼠标左键点击到左边的图标，使用Image_MouseLeftButtonDown事件。（设置一个标识符，标示当前已经被鼠标点击下去）
2、点击到这个图标不放，在整个Canvas内移动，使用LayoutRoot_MouseMove事件（此时设置一个图标跟随鼠标的位置移动，这个图标既是被点击的图标）。
3、当鼠标移动到右边的ListBox范围之内时放开鼠标左键，使用LayoutRoot_MouseLeftButtonUp事件（当鼠标左键弹起的时候，判断标识符是否为true，如果是的话表示有图
在本实例中我们将从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);
}
}
}
