Drag & drop à l'interieur d'une listBox (wpf)

**Rakken** · 21/07/2012, 20h00

Bonjour ^_^.

Alors voilà, j'ai une listBox (listCard) qui contient des usersControls (card) générés à la volée.
Et le truc, c'est que je voudrais pouvoir réarranger mes éléments à l'interieur de cette liste à l'aide du drag & drop.

Est-ce que quelqu'un aurait un exemple simple à me montrer pour que je puisse enfin comprendre comment ca marche

?

Merci d'avance !

**MABROUKI** · 23/07/2012, 04h52

Rebonjour Rakken

Voici 2 exemples en wpf ....le 1er est "the most simplest way" pour un ItemsControl (famille listbox,combo et treeview...)....
La collection ItemSource d'un itemscontrol "bindee" en xaml ne pouvant etre
etre modifiee directement car liee (c.à.d il faut modifier la collection d'origine )afin de deplacer un element et l'inserer ailleurs.......
C'est ce qui est fait via Drag Drop et un ItemContainerStyle dans le 1er exmple.....
code behind du class Person utilise dans les 2 exemples ci-apres:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;
 
namespace WpfSimpleListBoxDrag
{
    public  class Person
    {
        public  Person()
        {}
        public  Person( string  fn,int n,string u)
        {
           this.FirstName=fn;
           this.ID = n;
           this.UriImage = u;
        }
 
        public string FirstName { get; set; }
        public int ID { get; set; }
        public string UriImage { get; set; }
    }
    public class Persons:ObservableCollection<Person>
    {
        Person p;
        Random rnd = new Random();
        string  urImg ;
        public Persons()
        {  
          for (int i = 0; i < 9; i++)
			{
                urImg ="MesImages/giraffe.jpg";
                p = new Person("MyItem"+(i+1),rnd.Next(50,100),urImg);
                this.Add(p);
 
                urImg ="MesImages/mouse.jpg";
                p = new Person("MyItem"+(i+1),rnd.Next(50,100),urImg);
                this.Add(p);
 
                urImg ="MesImages/ZebrasThree.jpg";
                p = new Person("MyItem"+(i+1),rnd.Next(50,100),urImg);
                this.Add(p);
 
                urImg ="MesImages/zebra.jpg";
                p = new Person("MyItem"+(i+1),rnd.Next(50,100),urImg);
                this.Add(p);
 
			}
        }
 
    }
}

1er exemple:
code behind du winform1:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
 
namespace WpfSimpleListBoxDrag
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class SimpleWindow1 : Window
    {
        //simple variable cahche pour Persons
        Persons pList ;
        public SimpleWindow1()
        {
            InitializeComponent();
 
            //obtient une ref à MyDataSource(voir xaml)
            pList=(Persons)this.listbox1.ItemsSource;
        }
        void s_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (sender is ListBoxItem)
            {
                ListBoxItem draggedItem = sender as ListBoxItem;
                DragDrop.DoDragDrop(draggedItem, draggedItem.DataContext, DragDropEffects.Move);
                draggedItem.IsSelected = true;
                draggedItem.Foreground = Brushes.Red;
            }
        }
 
 
        void listbox1_Drop(object sender, DragEventArgs e) 
        {       
		    Person  droppedData = e.Data.GetData(typeof( Person)) as  Person;       
		     Person target = ((ListBoxItem)(sender)).DataContext as  Person;   
		    int removedIdx = listbox1.Items.IndexOf(droppedData);        
		    int targetIdx = listbox1.Items.IndexOf(target);   
		    if (removedIdx < targetIdx)       
		    {          
		      pList.Insert(targetIdx + 1, droppedData);    
		      pList.RemoveAt(removedIdx);        
		     }        
 
		    else        
		    {          
			    int remIdx = removedIdx+1;          
			    if (pList.Count + 1 > remIdx)     
			    {              
			       pList.Insert(targetIdx, droppedData);   
				    pList.RemoveAt(remIdx);    
			    }  
		    } 
        }
    }
}

code xaml du winform1:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<Window x:Class="WpfSimpleListBoxDrag.SimpleWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfSimpleListBoxDrag"
        Title="Simple Drag Drop Window" Height="300" Width="300">
    <Window.Resources>
        <!--ObservableCollection Persons-->
        <local:Persons x:Key="MyDataSource"></local:Persons>
        <!--DataTemplate  du listbox-->
        <DataTemplate 
            x:Key="ItemTemplate"
            DataType="{x:Type local:Person}">
            <Border Background="Transparent"
					BorderBrush="DarkGray"
					BorderThickness="0,0,0,1"
					Padding="5">
                <StackPanel   Orientation="Horizontal" >
                    <TextBlock
                        Margin="20"
                        HorizontalAlignment="Center"
                        FontSize="18"
                        Text="{Binding FirstName}"/>
                    <TextBlock
                        Margin="20"
                        FontSize="18"
                        HorizontalAlignment="Center"
                        Text="{Binding ID}"/>
                    <Image 
                        Height="100"
                        Width="100"
                        Stretch="Uniform"
                        Source="{Binding UriImage}"/>
                </StackPanel>
            </Border>
        </DataTemplate>
        <!--ItemContainerStyle qui fait le drag drop desire-->
        <Style 
            x:Key="itemcontainerstyle"
            TargetType="{x:Type ListBoxItem}">
            <Setter Property="ListBoxItem.IsSelected" Value="true"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="AllowDrop" Value="true"/>
            <EventSetter
                Event="ListBoxItem.PreviewMouseLeftButtonDown"  
                Handler="s_PreviewMouseLeftButtonDown" />
            <EventSetter 
                Event="ListBoxItem.Drop" 
                Handler="listbox1_Drop"/>
            <Style.Triggers>
                <Trigger
                    Property="ListBoxItem.IsSelected" Value="true">
                    <Setter 
                        Property="ListBoxItem.Foreground" Value="Red" />
                </Trigger>
                <Trigger
                    Property="ListBoxItem.IsSelected" Value="false">
                    <Setter 
                        Property="ListBoxItem.Foreground" Value="Black" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ListBox 
            x:Name="listbox1" 
            HorizontalAlignment="Center"
            ScrollViewer.VerticalScrollBarVisibility="Visible"
            ItemTemplate="{StaticResource ItemTemplate}" 
            ItemContainerStyle="{StaticResource itemcontainerstyle}"
            ItemsSource="{StaticResource MyDataSource}">
        </ListBox>
    </Grid>
</Window>

2er exemple:

Le 2eme exemple rajoute un adorner dote d'un tooltip pour agrementer le Drag Drop dont le code est du à Pavan Podilla (voir son open source kit FluidKit sir site microsoft CodePlex.Com).....
code behind des class HoverAdorner & HoverInteractor:
fichier class =>HoverAdorner.cs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;
 
namespace WpfSimpleListBoxDrag
{
	public class HoverAdorner : Adorner
	{
		public HoverAdorner(UIElement adornedElement) : base(adornedElement)
		{
			Container = new ContentPresenter();
		}
 
		protected override Size MeasureOverride(Size constraint)
		{
			Container.Measure(constraint);
			return Container.DesiredSize;
		}
 
		protected override Size ArrangeOverride(Size finalSize)
		{
			double left = AdornedElement.RenderSize.Width - Container.DesiredSize.Width;
			Container.Arrange(new Rect(new Point(left, AdornedElement.RenderSize.Height/2), finalSize));
			return finalSize;
		}
 
		protected override System.Windows.Media.Visual GetVisualChild(int index)
		{
			return Container;
		}
 
		protected override int VisualChildrenCount
		{
			get { return 1; }
		}
 
		internal ContentPresenter Container { get; set; }
	}
}

fichier class =>HoverInteractor.cs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
using System.Diagnostics;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
 
namespace WpfSimpleListBoxDrag
{
	public class HoverInteractor : DependencyObject
	{
		public static readonly DependencyProperty UseHoverProperty = DependencyProperty
			.RegisterAttached(
			"UseHover", typeof (bool), typeof (HoverInteractor),
			new PropertyMetadata(false, OnUseHoverChanged));
 
		private static readonly DependencyProperty AttachedAdornerProperty = DependencyProperty
			.Register(
			"AttachedAdorner", typeof (AdornerInfo), typeof (HoverInteractor));
 
		public static void SetUseHover(DependencyObject d, bool use)
		{
			d.SetValue(UseHoverProperty, use);
		}
 
		private static void OnUseHoverChanged(DependencyObject d,
		                                      DependencyPropertyChangedEventArgs e)
		{
			ListBox lb = d as ListBox;
			if (lb != null)
			{
				if ((bool) e.NewValue)
				{
					lb.MouseMove += ListBox_MouseMove;
					lb.MouseLeave += ListBox_MouseLeave;
				}
				else
				{
					lb.MouseEnter -= ListBox_MouseMove;
					lb.MouseLeave -= ListBox_MouseLeave;
				}
			}
		}
 
		private static void ListBox_MouseLeave(object sender, MouseEventArgs e)
		{
			ListBox lb = sender as ListBox;
 
			// Remove any previous Adorners
			AdornerInfo prevInfo = lb.GetValue(AttachedAdornerProperty) as AdornerInfo;
			AdornerLayer layer = AdornerLayer.GetAdornerLayer(lb);
			if (prevInfo != null)
			{
				if (layer != null)
				{
					layer.Remove(prevInfo.Adorner);
					lb.ClearValue(AttachedAdornerProperty);
				}
			}
		}
 
		private static void ListBox_MouseMove(object sender, MouseEventArgs e)
		{
			// Check that we are hovering on a ListBoxItem
			ListBox lb = sender as ListBox;
			ListBoxItem item =
				lb.ContainerFromElement(e.OriginalSource as Visual) as ListBoxItem;
			if (item == null)
			{
				return;
			}
 
			// Remove any previous Adorners
			AdornerInfo prevInfo = lb.GetValue(AttachedAdornerProperty) as AdornerInfo;
			AdornerLayer layer = AdornerLayer.GetAdornerLayer(lb);
			if (prevInfo != null)
			{
				if (prevInfo.ListItem == item) return;
				layer.Remove(prevInfo.Adorner);
				lb.ClearValue(AttachedAdornerProperty);
			}
 
			// Attach new adorner to current ListBoxItem
			HoverAdorner adorner = new HoverAdorner(item);
			adorner.Container.Content = lb.ItemContainerGenerator.ItemFromContainer(item);
			adorner.Container.ContentTemplate =
				item.FindResource("AdornerTemplate") as DataTemplate;
			layer.Add(adorner);
 
			AdornerInfo info = new AdornerInfo();
			info.Adorner = adorner;
			info.ListItem = item;
			lb.SetValue(AttachedAdornerProperty, info);
		}
	}
 
	internal class AdornerInfo
	{
		public HoverAdorner Adorner;
		public ListBoxItem ListItem;
	}
}

code behind du winform2 (identique):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
//CODE BEHIND IDENTIQUE
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
 
namespace WpfSimpleListBoxDrag
{
    /// <summary>
    /// Logique d'interaction pour WindowiInteractor.xaml
    /// </summary>
    public partial class WinInteractor : Window
    {
 
       //simple variable cahche pour Persons
        Persons pList ;
        public WinInteractor()
        {
            InitializeComponent();
 
            //obtient une ref à MyDataSource(voir xaml)
            pList=(Persons)this.listbox1.ItemsSource;
        }
        void s_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (sender is ListBoxItem)
            {
                ListBoxItem draggedItem = sender as ListBoxItem;
                DragDrop.DoDragDrop(draggedItem, draggedItem.DataContext, DragDropEffects.Move);
                draggedItem.IsSelected = true;
                draggedItem.Foreground = Brushes.Red;
            }
        }
 
 
        void listbox1_Drop(object sender, DragEventArgs e) 
        {       
		    Person  droppedData = e.Data.GetData(typeof( Person)) as  Person;       
		     Person target = ((ListBoxItem)(sender)).DataContext as  Person;   
		    int removedIdx = listbox1.Items.IndexOf(droppedData);        
		    int targetIdx = listbox1.Items.IndexOf(target);   
		    if (removedIdx < targetIdx)       
		    {          
		      pList.Insert(targetIdx + 1, droppedData);    
		      pList.RemoveAt(removedIdx);        
		     }        
 
		    else        
		    {          
			    int remIdx = removedIdx+1;          
			    if (pList.Count + 1 > remIdx)     
			    {              
			       pList.Insert(targetIdx, droppedData);   
				    pList.RemoveAt(remIdx);    
			    }  
		    } 
        }
    }
}

code xaml winform2:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<Window x:Class="WpfSimpleListBoxDrag.WinInteractor"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfSimpleListBoxDrag"
        Title="Window Interactor" Height="300" Width="300">
    <Window.Resources>
        <!--Rajout-->
        <!--DataTemplate pour Adorner-->
        <DataTemplate x:Key="AdornerTemplate">
            <Border BorderBrush="Gray"
					BorderThickness="1"
					Background="#5F000000"
					SnapsToDevicePixels="True"
					CornerRadius="15"
					Width="130"
					Height="30">
                <TextBlock 
                    Text="{Binding Path=FirstName, StringFormat=ToolTip for {0}}"
					FontFamily="Times New Roman"
					FontSize="13"
					VerticalAlignment="Center"
					HorizontalAlignment="Center"
					Foreground="White"/>
            </Border>
        </DataTemplate>
 
 
        <!--Fin Rajout-->
        <!--ObservableCollection Persons--> 
        <local:Persons x:Key="MyDataSource"></local:Persons>
        <!--DataTemplate  du listbox-->
        <DataTemplate 
            x:Key="ItemTemplate"
            DataType="{x:Type local:Person}">
            <Border Background="Transparent"
					BorderBrush="DarkGray"
					BorderThickness="0,0,0,1"
					Padding="5">
                    <StackPanel   Orientation="Horizontal" >
                        <TextBlock
                            Margin="20"
                            HorizontalAlignment="Center"
                            FontSize="18"
                            Text="{Binding FirstName}"/>
                        <TextBlock
                            Margin="20"
                            FontSize="18"
                            HorizontalAlignment="Center"
                            Text="{Binding ID}"/>
                        <Image 
                            Height="100"
                            Width="100"
                            Stretch="Uniform"
                            Source="{Binding UriImage}"/>
                </StackPanel>
            </Border> 
        </DataTemplate>
        <!--ItemContainerStyle qui fait le drag drop desire-->
        <Style 
            x:Key="itemcontainerstyle"
            TargetType="{x:Type ListBoxItem}">
            <Setter Property="ListBoxItem.IsSelected" Value="true"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="AllowDrop" Value="true"/>
            <EventSetter
                Event="ListBoxItem.PreviewMouseLeftButtonDown"  
                Handler="s_PreviewMouseLeftButtonDown" />
            <EventSetter 
                Event="ListBoxItem.Drop" 
                Handler="listbox1_Drop"/>
            <Style.Triggers>
                <Trigger
                    Property="ListBoxItem.IsSelected" Value="true">
                    <Setter 
                        Property="ListBoxItem.Foreground" Value="Red" />
                </Trigger>
                <Trigger
                    Property="ListBoxItem.IsSelected" Value="false">
                    <Setter 
                        Property="ListBoxItem.Foreground" Value="Black" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ListBox 
            x:Name="listbox1" 
            HorizontalAlignment="Center"
            local:HoverInteractor.UseHover="True"
            ScrollViewer.VerticalScrollBarVisibility="Visible"
            ItemTemplate="{StaticResource ItemTemplate}" 
            ItemContainerStyle="{StaticResource itemcontainerstyle}"
            ItemsSource="{StaticResource MyDataSource}">
        </ListBox>
    </Grid>
</Window>

En esperant qu'ils repondent au souci ......
bon code......

**Rakken** · 24/07/2012, 19h36

C'est juste génial. Merci, merci merci !

D'ailleurs, au moins pour la première partie, je serai d'avis de mettre le code tel quel dans une faq.

Drag & drop à l'interieur d'une listBox (wpf) [Débutant]

C#

Vue hybride

Discussions similaires

Partager

Partager