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

        } 

        /// 圖示圖像 

        public BitmapImage IcoImage 

            get { return icoImage; } 

            set { icoImage = value; } 

        #region 單一執行個體 

        public static readonly IphoneIco instance = new IphoneIco(); 

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

    } 

        然後我們來看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" > 

MouseLeftButtonDown="Image_MouseLeftButtonDown" 

<!--這個在滑鼠拖動過程中顯示的圖示--> 

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

/// 右邊ListBox的結果集合 

private static List<IphoneIco> AddiphoneList = new List<IphoneIco>(); 

/// 左邊ListBox的結果集合 

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.Source = null; 

leftMouseflag = false; 

private void LayoutRoot_MouseMove(object sender, MouseEventArgs e) 

//讓圖檔跟随滑鼠的移動而移動 

this.Img.SetValue(Canvas.LeftProperty, point.X); 

this.Img.SetValue(Canvas.TopProperty, point.Y-5.0); 

本文轉自程興亮 51CTO部落格，原文連結:http://blog.51cto.com/chengxingliang/826456