Silverlight实用窍门系列:43.Silverlight从ListBox拖拽图标到另一ListBox
2011-05-30 10:37
429 查看
在本实例中我们将从ListBox中拖出一个图标到另外一个ListBox中,这是一个比较有用的小功能,在这里我们首先来看运行效果(点击下面的图片即可拖动左边的图标到右边的ListBox中去)。
实现过程是:1、我们把这个过程分为鼠标左键点击到左边的图标,使用Image_MouseLeftButtonDown事件。(设置一个标识符,标示当前已经被鼠标点击下去)
2、点击到这个图标不放,在整个Canvas内移动,使用LayoutRoot_MouseMove事件(此时设置一个图标跟随鼠标的位置移动,这个图标既是被点击的图标)。
3、当鼠标移动到右边的ListBox范围之内时放开鼠标左键,使用LayoutRoot_MouseLeftButtonUp事件(当鼠标左键弹起的时 候,判断标识符是否为true,如果是的话表示有图标被拖动,并且判断此时的鼠标位置是否在右边的ListBox范围之内,如果是则将被拖动的图标放入右 边的ListBox中)
首先我们添加8张图片素材,然后编写一个类来获取图片列表,其CS代码如下:
然后我们来看MainPage.xaml中的代码,向其中添加两个ListBox以及Image图标,其代码如下:
最后我们来看MainPage.xaml.cs代码,其中有相关的逻辑控制在注释中已注明:
本实例采用VS2010+Silverlight 4.0编写,如需源码请点击 SL4Drag.zip 下载。
实现过程是: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 下载。
相关文章推荐
- Silverlight实用窍门系列:43.Silverlight从ListBox拖拽图标到另一ListBox【附带源码实例】
- Silverlight实用窍门系列:7.制作可拖动的自定义控件,获取拖拽后控件坐标【实例源码下载】
- Silverlight实用窍门系列:18.DataGrid内绑定ComboBox和ListBox以及取值【附带源码实例】
- Silverlight实用窍门系列:39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】
- Silverlight实用窍门系列:72.Silverlight的Implicit Style、自定义主题皮肤、系统主题皮肤
- Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))【附带实例源码】
- Silverlight实用窍门系列:73.Silverlight的DataGrid分组以及模拟合并单元格 推荐
- Silverlight实用窍门系列:10.动态生成DataGrid,动态绑定DataGrid模板列【附带实例源码】
- Silverlight实用窍门系列:48.DataGrid行详细信息的绑定--DataGrid.RowDetailsTemplate
- Silverlight实用窍门系列:67.Silverlight下的Socket通讯
- Silverlight实用窍门系列:57.Silverlight中的Binding使用(二)-数据验证
- Silverlight实用窍门系列:36.Silverlight中播放视频和打印文档【附带源码实例】
- Silverlight实用窍门系列:72.Silverlight的Implicit Style、自定义主题皮肤、系统主题皮肤 推荐
- [转载]Silverlight实用窍门系列:71.Silverlight的Style
- Silverlight实用窍门系列:2.Silverlight动态加载外部XML指定地址的WebService---(动态加载外部XML文件中指定的WebService地址)
- Silverlight实用窍门系列:73.Silverlight的DataGrid分组以及模拟合并单元格
- Silverlight实用窍门系列:46.深入了解Silverlight的IValueConverter和TypeConverter
- Silverlight实用窍门系列:9.动态生成实体类,根据XML模板使用Emit生成动态类绑定到DataGrid【附代实例源码】
- Silverlight实用窍门系列:50.InkPresenter涂鸦板的基本使用,以及将效果保存为Png图片【附带源码实例】
- Silverlight实用窍门系列:61.Silverlight中的Trigger触发器,自定义翻页触发器