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 下载。
posted @ 2011-05-30 10:37  程兴亮  阅读(4352)  评论(5编辑  收藏