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 下载。

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