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


 //鼠标在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;


 //如果得知鼠标左键松动的位置是右边的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);

}

Winform控件优化之TabControl控件的使用和常用功能 TabControl是一个分页切换（tab）控件，不同的页框内可以呈现不同的内容，将主要介绍调整tab的左右侧显示、设置多行tab、禁用或删除tabpage、隐藏TabControl头部的选项卡等
WPF 4 DataGrid 控件（基本功能篇） 原文:WPF 4 DataGrid 控件（基本功能篇）      提到DataGrid 不管是网页还是应用程序开发都会频繁使用。通过它我们可以灵活的在行与列间显示各种数据。本篇将详细介绍WPF 4 中DataGrid 的相关功能。
煦风满裳 程兴亮，专注于C#方面的开发工作，喜欢钻研Silverlight,CIL等方面的知识。平时喜欢看书、写技术博客、摄影、旅游和运动。