Problème avec Drag and Drop WPF

**Moh1267** · 03/06/2014, 11h21

Bonjour tout le monde,

j'ai un problème avec la fonction de drop dans mon application: j'ai un Canvas qui contient un ensemble des StackPanel(chaque stackPanel contient des image,textblock...etc), lorsque je clique sur un stackPanel dans ce canvas je dois pouvoir le déplacer(avec son contenu) vers un autre canvas, j'ai réussi à faire ceci mais mon problème c'est que lorsque je fais un drop sur le deuxième canvas le stackpanel s'ajoute mais par fois il est dupliqué (il s'ajoute deux fois donc j'aurai dans le deuxième canvas deux stackPanel identiques au stackpanel sur lequel j'ai fait mon drag & drop) :o , je ne comprends pas par ce que par fois le drage & drop marche d'une façon normal et par fois lorsque je drop j'obtient deux StackPanel et non pas un !!!!!!

Merci pour votre aide

.... voila mon code source:

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
104
105
106
107
108
109
110
111
112
113
114
115
 
 
/**************************************DRAG*************************/
 private void drageContenentControle(object sender, MouseButtonEventArgs e)
        {
 
            StackPanel Conteneur =new StackPanel();
			// si l'utilisateur a cliqué sur le stackpanel
            if (e.Source is StackPanel)
            { 
        	 Conteneur = e.Source as StackPanel;
			Conteneur.Background=Brushes.YellowGreen;
 
            }
			else{
				// si l'utilisateur a cliqué sur l'image du composants
				if(e.Source is Image)
				{
					Image img= e.Source as Image;
				  	Conteneur= img.Parent as StackPanel;
					Conteneur.Background=Brushes.YellowGreen;
 
 
				}
				// si l'utilisateur a cliqué sur le textBlock (le nom de composant)
				else{
                    if (e.Source is TextBlock)
                    {
                        TextBlock text = e.Source as TextBlock;
                        Conteneur = text.Parent as StackPanel;
                        Conteneur.Background = Brushes.YellowGreen;
                        text.Background = Brushes.Red;
                    }
                    else { 
 
                    }
 
 
 
				}
 
			}
 
            DataObject data = new DataObject(typeof(StackPanel), Conteneur);
            DragDrop.DoDragDrop(Conteneur, data, DragDropEffects.Copy);
 
 
        }
              /***************************DROP********************/
		private void DropImage(object sender, DragEventArgs e)
		{
 
 
			StackPanel contr = e.Data.GetData(typeof(StackPanel)) as StackPanel;
			contr.Background = null;
			Image image = new Image();
			TextBlock txt = new TextBlock();
 
 
			foreach(Object obj in contr.Children){
				if (obj is Image)
				{
					Image pic = obj as Image;
					image.Source = pic.Source;
					image.Width = pic.Width;
					image.Height = pic.Height;
					image.Name = pic.Name;
					image.Margin=pic.Margin;
                    image.IsHitTestVisible = false;
 
				}else { 
						if(obj is TextBlock)
						{
							TextBlock text = obj as TextBlock;
							txt.Name = text.Name;
							txt.Text = text.Text;
							txt.Margin=text.Margin;
                            txt.IsHitTestVisible = true;
 
						}
						}
 
			}
 
			StackPanel stackControl = new StackPanel() {Width = contr.Width, Height = contr.Height, 
														Background = contr.Background, Name = contr.Name,
														Children = {image,txt } };
 
            /******************************************************************************************/
           /****** ICI j'ajoute le stackPanel que je veux droper dans un ContentControl pour pouvoir lui appliquer une Template; **/
           /*****************************************************************************************/
 
            essaye = new ContentControl();
            essaye.Width = contr.Width;
            essaye.Height = contr.Height;
            essaye.MinWidth = contr.Width - 10;
            essaye.MinHeight = contr.Height - 10;            
 
            Selector.SetIsSelected(essaye,true);
            essaye.SetResourceReference(StyleProperty, "DesignerItemStyle");
            essaye.Content =stackControl;
 
 
 
 
 
            Canvas.SetLeft(essaye, e.GetPosition(MYCANVAS).X);
            Canvas.SetTop(essaye, e.GetPosition(MYCANVAS).Y);
            MYCANVAS.Children.Add(essaye);
 
 
 
 
 
		}

**MABROUKI** · 04/06/2014, 02h46

bonjour
Ya mouh ,tu veux cloner ton StackPanel hein et le dropper sur le canvas dest...
Dans les winforms les controls ne sont pas clonables et il faut les dupliquer en les recreant à zero
Dans WPF heureusement tu as :
-Xaml.Writer
-et Xaml.Reader(spacename System.Windows.Markup)
qui permettent de sauvegarder le xaml d'un UIElement sous forme de chaine et de recreer à partir de la chaine un clone UIElement xaml...hourra!!!

le code xaml du form:

Code xaml :

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
 
<Window x:Class="WpfDragDrop.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <DockPanel >
        <Border 
            Margin="5"
            BorderBrush="Red"
            BorderThickness="2.0"> 
            <Canvas
                x:Name="src"
                Width="350"
                Height="350"
                Background="LightGray" 
                PreviewMouseLeftButtonDown="src_PreviewMouseLeftButtonDown"  
                PreviewMouseMove="src_PreviewMouseMove"  
                PreviewMouseUp="src_PreviewMouseUp" >
                <StackPanel
                     Background="LightBlue">
                    <Rectangle 
                        Margin="5"
                        Stroke="Black" 
                        Fill="Yellow" 
                        Width="100"
                        Height="50">
                    </Rectangle>
                    <TextBlock  
                       Margin="5"
                       Background="Magenta"  
                       Text="texte1"
                       Width="100"
                       Height="50">
                    </TextBlock  >
                </StackPanel>
            </Canvas>
        </Border>
        <Border
            Margin="5"
            BorderBrush="LimeGreen" 
            BorderThickness="2.0"> 
            <Canvas
                x:Name="dst"
                Background="Beige" 
                Width="350"
                Height="350"
                AllowDrop="true"
               PreviewDrop="dst_PreviewDrop"
                >
        </Canvas>
        </Border>
    </DockPanel>
</Window>

code behind .cs du form:

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
104
105
106
107
108
109
 
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;
using System.Windows.Markup;
 
namespace WpfDragDrop
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
 
        public Window1()
        {
            InitializeComponent();
 
        }
 
        private ContentControl  essaye = null ;
        private StackPanel conteneur = null;
        private void src_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement elt = e.Source as FrameworkElement;
            if (elt == null) return;
            if (elt is StackPanel)
            {
                conteneur = elt as StackPanel;
 
            }
            else if (elt is Image)
            {
                conteneur =(StackPanel) elt.Parent;
            }
            else if (elt is TextBlock )
            {
                conteneur = (StackPanel)elt.Parent;
            }
            if (conteneur != null)
            {
                conteneur.Background = Brushes.YellowGreen;
                DataObject data = new DataObject(typeof(StackPanel), conteneur);
                DragDrop.DoDragDrop(conteneur, data, DragDropEffects.Copy);
            }
        }
        private void src_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            //la il faudrait un adorner (Adorner.Layer(varAdorner), pour donner un feedback à l'user
 
        }
 
        private void src_PreviewMouseUp(object sender, MouseButtonEventArgs e)
        {
            conteneur = null;
            essaye = null; 
            serializedElt = null;
        }
        double x = 0.0;
        double y = 0.0;
        private void dst_PreviewDrop(object sender, DragEventArgs e)
        {
            Canvas eltDest = e.Source as Canvas;
            if (e.Data.GetDataPresent(typeof(StackPanel)))
            {
 
                conteneur = e.Data.GetData(typeof(StackPanel)) as StackPanel;
                conteneur.Background = Brushes.Aqua;
                conteneur.Opacity = 0.5;
                UIElement  ui=  CloneXaml(conteneur);
 
                essaye = new ContentControl();
                essaye.Width = conteneur.ActualWidth;
                essaye.Height = conteneur.ActualHeight;
                essaye.MinWidth = conteneur.ActualWidth - 10;
                essaye.MinHeight = conteneur.ActualHeight - 10;
 
 
 
                essaye.Content = ui ;
                x += 50;
                y += 50; 
                Canvas.SetLeft(essaye, x);
                Canvas.SetTop(essaye, y);
                eltDest.Children.Add(essaye);
            }
 
        }
        //la fonction qui est ton ami....
        private string serializedElt = string.Empty;
        private UIElement CloneXaml(UIElement element)
        {
            serializedElt = XamlWriter.Save(element);
            UIElement obj = (UIElement)XamlReader.Parse(serializedElt);
            return obj;
        }
 
 
    }
}

bon code.......

**Moh1267** · 04/06/2014, 11h35

Bonjour MABROUKI,

Merci beaucoup pour ton aide

.. En fait, Mon problème était le suivant:

lorsque je remplie le Canvas par les stackPanel j'associe la méthode Drag au stackpanel et à l'image que contient le StackPenl, ce qui fait que lorsque l'utilisateur fait un drag sur l'image on fait appelle a la méthode drag deux fois et lorsque il drop l’élément sélectionné s'ajoute deux fois vu que il a été copié deux fois ..

Voila ce que à peu pret ce que j'avais:

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
public MainWindow()
		{
            InitializeComponent();
            Chargement_Component();// appel à la méthode de chargement des composants dans la toolbox 
	
		}

private void Chargement_Component()
     {
    for (int j = 0; j < 31; j++)
           {
              
               Conteneur1 = new StackPanel();

              ...............................
  
               Image im1 = new Image(); 
             .......................
               
               Conteneur1.Children.Add(im1);

              TextBlock NameOfComponent = new TextBlock();
               NameOfComponent.Text = res[j];

              Conteneur1.Children.Add(NameOfComponent);

            PalleteComposant.Children.Add(Conteneur1);

/**************************************************************************************************/
/**********Mon probleme étais dans les deux ligne suivant ****************************************************/
/************************************************************************************************/
     Conteneur1.MouseLeftButtonDown += new MouseButtonEventHandler(drageContenentControle);
     //NameOfComponent.MouseLeftButtonDown += new MouseButtonEventHandler(drageContenentControle); // c'etais ici mon probleme , sans faire attention et tout bêtement  j'associe drag au text block qui est deja dans le stackPanel.

Donc en enlevant cette ligne de code, le drage and drop marche bien

...

à part sa, et vu que je suis tout nouveau dans la programmation WPF, Je vous prie monsieur MABROUKI , voyez vous des problèmes dans mon code de drage and drop ??

Problème avec Drag and Drop WPF

C#

Discussions similaires

Partager

Partager