Silverlight实用窍门系列:43.Silverlight从ListBox拖拽图标到另一ListBox

简介:

        在本实例中我们将从ListBox中拖出一个图标到另外一个ListBox中,这是一个比较有用的小功能,在这里我们首先来看运行效果(点击下面的图片即可拖动左边的图标到右边的ListBox中去)。

        实现过程是:1、我们把这个过程分为鼠标左键点击到左边的图标,使用Image_MouseLeftButtonDown事件。(设置一个标识符,标示当前已经被鼠标点击下去)

          2、点击到这个图标不放,在整个Canvas内移动,使用LayoutRoot_MouseMove事件(此时设置一个图标跟随鼠标的位置移动,这个图标既是被点击的图标)。

          3、当鼠标移动到右边的ListBox范围之内时放开鼠标左键,使用LayoutRoot_MouseLeftButtonUp事件(当鼠标左键弹起的时 候,判断标识符是否为true,如果是的话表示有图标被拖动,并且判断此时的鼠标位置是否在右边的ListBox范围之内,如果是则将被拖动的图标放入右 边的ListBox中) 


        首先我们添加8张图片素材,然后编写一个类来获取图片列表,其CS代码如下:

 


  
  
  1. public class IphoneIco 
  2.     { 
  3.         #region 字段 
  4.  
  5.         string icoName; 
  6.         BitmapImage icoImage; 
  7.  
  8.         #endregion 
  9.  
  10.         #region 属性 
  11.  
  12.         /// <summary> 
  13.         /// 图标名称 
  14.         /// </summary> 
  15.         public string IcoName 
  16.         { 
  17.             get { return icoName; } 
  18.             set { icoName = value; } 
  19.         } 
  20.  
  21.         /// <summary> 
  22.         /// 图标图像 
  23.         /// </summary> 
  24.         public BitmapImage IcoImage 
  25.         { 
  26.             get { return icoImage; } 
  27.             set { icoImage = value; } 
  28.         } 
  29.  
  30.         #endregion 
  31.  
  32.         #region 单一实例 
  33.  
  34.         public static readonly IphoneIco instance = new IphoneIco(); 
  35.  
  36.         #endregion 
  37.  
  38.         #region 公共方法 
  39.  
  40.         public List<IphoneIco> getIphoneIcoList() 
  41.         { 
  42.             List<IphoneIco> iphoneIcoList = new List<IphoneIco>() 
  43.             { 
  44.                 new IphoneIco(){ IcoName="1", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/1.png",UriKind.RelativeOrAbsolute))}, 
  45.                 new IphoneIco(){ IcoName="2", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/2.png",UriKind.RelativeOrAbsolute))}, 
  46.                 new IphoneIco(){ IcoName="3", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/3.png",UriKind.RelativeOrAbsolute))}, 
  47.                 new IphoneIco(){ IcoName="4", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/4.png",UriKind.RelativeOrAbsolute))}, 
  48.                 new IphoneIco(){ IcoName="5", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/5.png",UriKind.RelativeOrAbsolute))}, 
  49.                 new IphoneIco(){ IcoName="6", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/6.png",UriKind.RelativeOrAbsolute))}, 
  50.                 new IphoneIco(){ IcoName="7", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/7.png",UriKind.RelativeOrAbsolute))}, 
  51.                 new IphoneIco(){ IcoName="8", IcoImage=new BitmapImage(new Uri("/SL5Drag;component/Images/8.png",UriKind.RelativeOrAbsolute))} 
  52.             }; 
  53.             return iphoneIcoList; 
  54.         } 
  55.  
  56.         #endregion 
  57.     } 

        然后我们来看MainPage.xaml中的代码,向其中添加两个ListBox以及Image图标,其代码如下:

 


 
 
  1. <UserControl x:Class="SL5Drag.MainPage" 
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  6. mc:Ignorable="d" 
  7. d:DesignHeight="400" d:DesignWidth="500"
  8.  
  9. <!--这个Canvas中有鼠标左键弹起事件,以及鼠标移动事件--> 
  10. <Canvas x:Name="LayoutRoot" AllowDrop="True" 
  11. MouseLeftButtonUp="LayoutRoot_MouseLeftButtonUp" 
  12. MouseMove="LayoutRoot_MouseMove"
  13. <!--这个是右边的ListBox,鼠标拖动的图标在这个ListBox范围内放开--> 
  14. <ListBox Margin="400 0 0 0" Background="AliceBlue" Height="400" 
  15. HorizontalAlignment="Right" Name="listBox2" 
  16. VerticalAlignment="Top" Width="50" > 
  17. <ListBox.ItemTemplate> 
  18. <DataTemplate> 
  19. <StackPanel Width="40" Height="40"
  20. <Border BorderThickness="1"
  21. <Image Source="{Binding IcoImage}" Width="30" 
  22. Height="30" Margin="0,5,6,0" 
  23. Tag="{Binding IcoName}" 
  24. HorizontalAlignment="Center" /> 
  25. </Border> 
  26. </StackPanel> 
  27. </DataTemplate> 
  28. </ListBox.ItemTemplate> 
  29. </ListBox> 
  30. <!--这个是左边的ListBox,鼠标将从此ListBox拖出图标--> 
  31. <ListBox Name="listBox1" Background="AliceBlue" Width="50" 
  32. HorizontalAlignment="Left" VerticalAlignment="Top" 
  33. Height="400" > 
  34. <ListBox.ItemTemplate> 
  35. <DataTemplate> 
  36. <StackPanel Width="40" Height="40"
  37. <Border BorderThickness="1"
  38. <Image Source="{Binding IcoImage}" Width="30" 
  39. Height="30" Margin="0,5,6,0" 
  40. Tag="{Binding IcoName}" 
  41. MouseLeftButtonDown="Image_MouseLeftButtonDown" 
  42. HorizontalAlignment="Center" /> 
  43. </Border> 
  44. </StackPanel> 
  45. </DataTemplate> 
  46. </ListBox.ItemTemplate> 
  47. </ListBox> 
  48. <!--这个在鼠标拖动过程中显示的图标--> 
  49. <Image Name="Img" Opacity="0.5" Width="30" Height="30" 
  50. Margin="0,5,6,0" Visibility="Collapsed" HorizontalAlignment="Center" /> 
  51.  
  52. </Canvas> 
  53. </UserControl> 

        最后我们来看MainPage.xaml.cs代码,其中有相关的逻辑控制在注释中已注明:


 
 
  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Net; 
  5. using System.Windows; 
  6. using System.Windows.Controls; 
  7. using System.Windows.Documents; 
  8. using System.Windows.Input; 
  9. using System.Windows.Media; 
  10. using System.Windows.Media.Animation; 
  11. using System.Windows.Shapes; 
  12. using System.Windows.Interactivity; 
  13. using Microsoft.Expression.Interactivity; 
  14. using Microsoft.Expression.Interactivity.Layout; 
  15. using System.Windows.Media.Imaging; 
  16. using System.ComponentModel; 
  17.  
  18. namespace SL5Drag 
  19. public partial class MainPage : UserControl 
  20. public MainPage() 
  21.  
  22. InitializeComponent(); 
  23. //设置左边的ListBox显示的内容项 
  24. this.listBox1.ItemsSource = IphoneIco.instance.getIphoneIcoList(); 
  25. string s = string.Empty; 
  26. List<IphoneIco> iphoneList; 
  27.  
  28. /// <summary> 
  29. /// 标示是否按下鼠标左键 
  30. /// </summary> 
  31. bool leftMouseflag = false
  32.  
  33. /// <summary> 
  34. /// 右边ListBox的结果集合 
  35. /// </summary> 
  36. private static List<IphoneIco> AddiphoneList = new List<IphoneIco>(); 
  37.  
  38. /// <summary> 
  39. /// 左边ListBox的结果集合 
  40. /// </summary> 
  41. public List<IphoneIco> IphoneList 
  42. get { return iphoneList; } 
  43. set { iphoneList = value; } 
  44.  
  45. private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
  46. //鼠标在ListBox中按下准备拖出图片的时候,设置leftMouseflag为true,并且设置Image为可见 
  47. leftMouseflag = true
  48. Image image=sender as Image; 
  49. this.Img.Source = image.Source; 
  50. Point point = e.GetPosition(null); 
  51. this.Img.SetValue(Canvas.LeftProperty, point.X ); 
  52. this.Img.SetValue(Canvas.TopProperty, point.Y - 5.0); 
  53. this.Img.Visibility = Visibility.Visible; 
  54.  
  55. private void LayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
  56.  
  57. //如果得知鼠标左键松动的位置是右边的ListBox上时则为右边的ListBox添加一列 
  58. Point point =e.GetPosition(null); 
  59.  
  60. if (point.X > 400 && point.X < 450 && point.Y < 400&& leftMouseflag == true ) 
  61. BitmapImage bimg = this.Img.Source as BitmapImage; 
  62. this.Img.Visibility = Visibility.Collapsed; 
  63. AddiphoneList.Add(new IphoneIco() 
  64. IcoName = "2"
  65. IcoImage = bimg 
  66. }); 
  67. this.listBox2.ItemsSource = null
  68. this.listBox2.ItemsSource = AddiphoneList; 
  69. else 
  70. this.Img.Visibility = Visibility.Collapsed; 
  71. this.Img.Source = null
  72. leftMouseflag = false
  73.  
  74. private void LayoutRoot_MouseMove(object sender, MouseEventArgs e) 
  75. //让图片跟随鼠标的移动而移动 
  76. Point point = e.GetPosition(null); 
  77. this.Img.SetValue(Canvas.LeftProperty, point.X); 
  78. this.Img.SetValue(Canvas.TopProperty, point.Y-5.0); 

        本实例采用VS2010+Silverlight 4.0编写,如需源码请点击 SL4Drag.zip 下载。



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

相关文章

热门文章

最新文章