Discussion :

[totodof]

Bonsoir,

Mon projet touche à sa fin, mais il me reste un petit problème que je n'arrive pas à gérer.

Je me suis inspiré d'un code trouvé sur internet pour effectuer mon Drag and Drop, mais il s'avère que lorsque je suis en train de déplacer une pièce et que je passe au dessus d'une autre, les deux pièces s'échangent, se déplacent et il se passe n'importe quoi. J'ai essayé d'inclure une section critique par plusieurs méthodes, mais le problème reste entier.

Je me demandais à quel niveau il faudrait faire les changements : lors du drag, ou lors du glissé ? Et que faut-il ajouter ? L'idée d'une section critique était bonne ou non (section critique simple :

Code :

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

1
2
3
4
5
6
7
8
9
 
if(isDropping==true)
{
     // On interdit le drop des autres pièces
}
else
{
     // Code du drop
}

Merci d'avance

Christophe

[jmix90]

Bonsoir Totodof

L'idée d'une section critique était bonne ou non (section critique simple :

Je pense en effet que c'est la bonne solution !

Jonathan ANTOINE
http://blog.lexique-du-net.com (anglais)

[totodof]

Merci pour ta réponse, mais le problème est que j'ai déjà essayé à peu près comme cela :

Un booleen seul d'abord (le isDragging), puis ensuite d'utiliser le lock (que je n'ai pas trop compris), et enfin les deux en même temps mais rien n'y fait, le passage au dessus d'une autre pièce met le "bazar", échange la pièce dropée avec celle qui est en dessous.

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
 
 private bool isDragging;
 private object lockObj = new object();
 private Point controlPoint, mousePoint, newMousePoint;
 
 
 private void rectMouseDown(object sender, MouseEventArgs e)
        {
            lock (lockObj)
            {
                if (isDragging == true)
                {
                    Grid g = (Grid)sender;
                    g.AllowDrop = false;
                    return;
                }
 
                controlPoint = new Point(Canvas.GetLeft((Grid)sender), Canvas.GetTop((Grid)sender));
                mousePoint = new Point(Mouse.GetPosition(this).X, Mouse.GetPosition(this).Y);
 
                isDragging = true;
            }
        }

Je pense mal utiliser ces méthodes. Si quelqu'un peut m'éclairer

Merci

[jmix90]

Bonsoir,

Je pense que le lock n'est pas nécessaire car dans tout les cas on est sur le Thread de l'UI donc tu peux le supprimmer.

Pour l'utilisation du booléen isDragging, il faut le faire sur le mouseMove et pas sur le mouseDown.

Code :

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

1
2
3
4
5
6
 
if(!isDragging){
    isDragging=true
    //Début du drag
}
//Sinon, on ne fait rien (ie. le drag est déjà en cours)

Et lors du drop, il faut bien penser à remettre isDragging à false...

[totodof]

Merci pour ta réponse mais je me suis retrouvé face à un petit problème. La variable isDragging étant initialisée à false, mes pièces se dropaient toutes seules sans que je clique et disparaissaient. Je l'ai donc initialisée à true, et, dans le mouseDown, je la change à false. Ensuite dans le mouseMouve, si elle est à false je la remet à true. Meme si cela n'est pas logique par rapport au nom de la variable, je pense que ca devrait marcher. Par contre ce qui m'étonne, c'est que mouseUp ne fait plus rien par rapport au drag and drop.

Mais le problème qui se pose est plutot surprenant. Lorsque je clique sur la pièce elle se drop, mais le seul mouvement que je peux faire est un mouvement de 0,25mm dans une seule direction, au choix au moment du clic.

Voici la totalité du code du drag and drop, et un bout du code XAML pour la structure.

Code du drag and drop

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
 
 private bool isDragging = true;
 private Point controlPoint, mousePoint, newMousePoint;
 
 private void rectMouseDown(object sender, MouseEventArgs e)
 {
      controlPoint = new Point(Canvas.GetLeft((Grid)sender), Canvas.GetTop((Grid)sender));
      mousePoint = new Point(Mouse.GetPosition(this).X, Mouse.GetPosition(this).Y);
      isDragging = false;
}
 
 private void rectMouseMove(object sender, MouseEventArgs e)
 {
      if (isDragging == false)
      {
            newMousePoint = new Point(Mouse.GetPosition(this).X, Mouse.GetPosition(this).Y);
 
            Canvas.SetLeft((Grid)sender, (controlPoint.X + newMousePoint.X - mousePoint.X));
            Canvas.SetTop((Grid)sender, (controlPoint.Y + newMousePoint.Y - mousePoint.Y));
            isDragging = true;
       }
 }
 
 private void rectMouseUp(object sender, MouseEventArgs e)
 {
         // Arrondi des coordonnées, si la pièce est lâchée hors du plateau on la remet au plus près
 
         if (Canvas.GetLeft((Grid)sender) > 225) Canvas.SetLeft((Grid)sender, 200);
         else if (Canvas.GetLeft((Grid)sender) < -175) Canvas.SetLeft((Grid)sender, -150);
         else Canvas.SetLeft((Grid)sender, arrondiCinquantaine(Canvas.GetLeft((Grid)sender)));
 
         if (Canvas.GetTop((Grid)sender) > -175) Canvas.SetTop((Grid)sender, -200);
         else if (Canvas.GetTop((Grid)sender) < -575) Canvas.SetTop((Grid)sender, -550);
         else Canvas.SetTop((Grid)sender, arrondiCinquantaine(Canvas.GetTop((Grid)sender)));
}

Un bout du XAML maintenant :

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
 
<Window x:Class="WpfBoard.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="700" Width="900">
    <Grid Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="213*" />
            <RowDefinition Height="648*" />
        </Grid.RowDefinitions>
        <Grid Height="410" Width="410" Margin="234,26" Grid.RowSpan="2" Name="Boardgrid">
            <Image Source="C:\Users\Christophe\Pictures\board.jpg"/>
            <!-- Initialisation des pièces blanches -->
            <Canvas Width="40" Height="40" Name="unking">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-350" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wking.bmp"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unquee">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-400" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wqueen.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unbish">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-450" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wbishop.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unbishop">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-300" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wbishop.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unhors">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-500" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\whorse.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unhorse">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-250" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\whorse.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="untowe">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-200" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wtower.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="untower">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-550" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wtower.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpion">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-200" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpiona">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-250" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpionb">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-300" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpionc">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-350" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Width="40" Height="40" Background="BlueViolet" Margin="-25,375,0,0">
                    <Image AllowDrop="True" Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>

Merci

[jmix90]

Oki,

Je n'étais pas très réveillé hier

Essaye ce bout de code :

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
 
 private Point controlPoint, mousePoint, newMousePoint;
 private Grid draggedControl=null;
 
 private void rectMouseDown(object sender, MouseEventArgs e)
 {
	Grid sendingGrid =sender as Grid;
    if( sendingGrid !=null && draggedControl==null){
 
      controlPoint = new Point(Canvas.GetLeft(sendingGrid), Canvas.GetTop(sendingGrid));
      mousePoint = new Point(Mouse.GetPosition(this).X, Mouse.GetPosition(this).Y);
 
	  }
}
 
 private void rectMouseMove(object sender, MouseEventArgs e)
 {
		Grid sendingGrid =sender as Grid;
      if ( sendingGrid!=null && sendingGrid.Equals(draggedControl))
      {
		            newMousePoint = new Point(Mouse.GetPosition(this).X, Mouse.GetPosition(this).Y);
 
            Canvas.SetLeft(sendingGrid, (controlPoint.X + newMousePoint.X - mousePoint.X));
            Canvas.SetTop(sendingGrid, (controlPoint.Y + newMousePoint.Y - mousePoint.Y));
 
       }
 }
 
 private void rectMouseUp(object sender, MouseEventArgs e)
 {
         // Arrondi des coordonnées, si la pièce est lâchée hors du plateau on la remet au plus près
		Grid sendingGrid =sender as Grid;
      if ( sendingGrid!=null && sendingGrid.Equals(draggedControl))
      {
		  draggedControl=null;
         if (Canvas.GetLeft(sendingGrid) > 225) Canvas.SetLeft(sendingGrid, 200);
         else if (Canvas.GetLeft(sendingGrid) < -175) Canvas.SetLeft(sendingGrid, -150);
         else Canvas.SetLeft(sendingGrid, arrondiCinquantaine(Canvas.GetLeft(sendingGrid)));
 
         if (Canvas.GetTop(sendingGrid) > -175) Canvas.SetTop(sendingGrid, -200);
         else if (Canvas.GetTop(sendingGrid) < -575) Canvas.SetTop(sendingGrid, -550);
         else Canvas.SetTop(sendingGrid, arrondiCinquantaine(Canvas.GetTop(sendingGrid)));
 
       }
 
}

Il vérifie en plus que le contrôle que l'on déplace et bien celui sur lequel on a initié le "draggage"... Par contre ce n'est pas réellement du dragage(déplacement d'un conteneur vers un autre dans mon sens) mais du déplacement d'élément...

Bon courage (et j'espère que ca va marcher !)

[totodof]

Je ne comprends pas ton code parait vraiment logique est vraiment bien, mais alors quand je clique, plus rien ne bouge. Demain j'ai rendez-vous avec mon tuteur de projet et je te tiens tiens au courant.

Merci

[jmix90]

Je ne comprends pas ton code parait vraiment logique est vraiment bien, mais alors quand je clique, plus rien ne bouge. Demain j'ai rendez-vous avec mon tuteur de projet et je te tiens tiens au courant.

Merci

Dans le Rect_mouseDown il faut faire : draggedControl = sendingGrid;


Cependant, je pense que tu es sur la mauvaise voie pour arriver à ton objectif. À ta place j'utiliserai les fonctionnalités de dragAndDrop comme dans l'article de Thomas au lieu d'essayer de les ré-implémenter.

Cette article pourrait de plus t'intéresser (même si c'est ce que je te déconseille de faire, il t'apportera peut être des précisions...) :

MonoTouch : ce contrôle suit mon doigt ! [.NET 3.5]

[totodof]

Merci, mais mon professeur ce matin, qui était absent depuis quelques temps, a trouvé une petit technique pour ne pas déplacer les autres. Le problème principal était que le Canvas que je déplaçait n'étais pas au premier plan (défini par l'ordre de déclaration). Un test pour ne pas déplacer les autres a été mis en place. Par contre, nous n'avons pas réussi à trouver comment mettre un Canvas (ou un Grid) au premier plan. Y-a-t-il une propriété permettant de le faire ?

Voici pour information le test mis en place :

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
 
private Grid g=null;
 
private void rectMouseDown(object sender, MouseEventArgs e)
        {
            g = (Grid)sender;
            // rest du code
        }
 
private void rectMouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging == true && g!=null && g==(Grid)sender) // on vérifie que le Grid qui appelle l'évènement est bien celui que l'on a dropé
            {
                newMousePoint = new Point(Mouse.GetPosition(this).X, Mouse.GetPosition(this).Y);
 
                Canvas.SetLeft((Grid)sender, (controlPoint.X + newMousePoint.X - mousePoint.X));
                Canvas.SetTop((Grid)sender, (controlPoint.Y + newMousePoint.Y - mousePoint.Y));
            }
        }

Par contre on ne peut en effet plus le déplacer comme il faut au dessus des autres pièces. Il y aurait d'autres solutions, telle que supprimer et recréer la pièce avant de la dropper, mais ce n'est pas très "propre". L'utilisation d'une propriété serait plus intéressante.

Encore merci

[jmix90]

Par contre, nous n'avons pas réussi à trouver comment mettre un Canvas (ou un Grid) au premier plan. Y-a-t-il une propriété permettant de le faire ?

Je pense que Zindex est ce que tu cherches...

Pour le reste : pourquoi n'utilises tu pas le drag and drop de WPF ?

[jmix90]

Encore une fois : regarde cet article , j'ai testé la méthode avec ton code et cela fonctionne niquel (suffit de changer les évents stylus par des events mouse) :

MonoTouch : ce contrôle suit mon doigt ! [.NET 3.5]

[totodof]

Ok j'essaye merci

[totodof]

Après un deuxième essai, celui-ci s'avère ne pas fonctionner encore. Je ne sais pas pourquoi, mais il ne prend même plus les pièces

A défaut je te montre le code que j'ai si jamais il est différent du tient :

Côté XAML :

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="700" Width="900">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="213*" />
            <RowDefinition Height="648*" />
        </Grid.RowDefinitions>
        <Grid Name="BoardWin" Height="410" Width="410" Margin="234,26" Grid.RowSpan="2">
            <Image Source="C:\Users\Christophe\Pictures\board.jpg"/>
            <!-- Initialisation des pièces blanches -->
            <Canvas Width="40" Height="40" x:Name="unking">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-350"  Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wking.bmp"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unquee" AllowDrop="True">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-400" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wqueen.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unbish">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-450" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wbishop.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unbishop">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-300" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wbishop.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unhors">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-500" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\whorse.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unhorse">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-250" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\whorse.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="untowe">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-200" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wtower.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="untower">
                <Grid AllowDrop="True" Canvas.Left="-150" Canvas.Top="-550" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wtower.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpion">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-200" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpiona">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-250" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpionb">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-300" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpionc">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-350" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpiond">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-400" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpione">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-450" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpionf">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-500" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="unpiong">
                <Grid AllowDrop="True" Canvas.Left="-100" Canvas.Top="-550" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\wpion.png"/>
                </Grid>
            </Canvas>
            <!-- Initialisation des pièces noires -->
            <Canvas Width="40" Height="40" Name="depion">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-200" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="depiona">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-250" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="depionb">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-300" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="depionc">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-350" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="depiond">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-400" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="depione">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-450" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="depionf">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-500" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="depiong">
                <Grid AllowDrop="True" Canvas.Left="150" Canvas.Top="-550" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bpion.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="detowe">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-200" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\btower.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="dehors">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-250" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bhorse.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="debish">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-300" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bbishop.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="dequee">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-350" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bqueen.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="deking">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-400" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bking.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="debishop">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-450" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bbishop.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="dehorse">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-500" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\bhorse.png"/>
                </Grid>
            </Canvas>
            <Canvas Width="40" Height="40" Name="detower">
                <Grid AllowDrop="True" Canvas.Left="200" Canvas.Top="-550" Width="40" Height="40" Background="BlueViolet" MouseDown="rectMouseDown" MouseMove="rectMouseMove" MouseUp="rectMouseUp" Margin="-25,375,0,0">
                    <Image Source="C:\Users\Christophe\Pictures\btower.png"/>
                </Grid>
            </Canvas>
        </Grid>
 
                <Grid Name="Piece1" Height="600" Width="150" Margin="18,26,700,26" Grid.RowSpan="2">
            <Border BorderBrush="Black" BorderThickness="2"/>
            <Label Name="labelNomJ1" Content="Joueur 1" FontSize="20" Margin="30,0,0,0"/>
        </Grid>
        <Grid Name="Piece2" Height="600" Width="150" Margin="700,26,18,26" Grid.RowSpan="2">
            <Border BorderBrush="Black" BorderThickness="2"/>
            <Label Name="labelNomJ2" Content="Joueur 2" FontSize="20" Margin="30,0,0,0" />
        </Grid>
    </Grid>
 
</Window>

Côté C# :

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
 
private UIElement draggedControl = null;
          private Point decalage;
          private int fingerId;
 
        private void rectMouseDown(object sender, MouseEventArgs e)
        {
            Grid g = sender as Grid;
            Canvas c = (Canvas)g.Parent;
            String nomGrid = c.Name;
 
            //On ne déplace pas le canvas !
              if (e.Source.ToString() == nomGrid) return;
 
              //Quel est l'élement qui a détecté un doigt ?
              UIElement sendingElement = e.Source as UIElement;
              if (sendingElement != null && draggedControl == null)
              {
                  //ou touche t'on l'objet ?
                  decalage = Mouse.GetPosition(sendingElement);
 
                  //Quel element déplace t-on ?
                  draggedControl = sendingElement;
 
                  //Quel doigt utilise t'on ?
                  fingerId = e.MouseDevice.GetHashCode();
              }
        }
 
        private void rectMouseMove(object sender, MouseEventArgs e)
        {
            Grid g = sender as Grid;
            String nomGrid = g.Name;
 
            //Déplacement en cours
              UIElement sendingGrid = e.Source as UIElement;
              if (//Est-on en train de faire un déplacement ?
                  draggedControl != null
                  //Avec le même doigt ?
                  && fingerId == e.MouseDevice.GetHashCode())
              {
 
                  Point pointOuEstLeDoigtParRapportAuCanvas = Mouse.GetPosition(g);
                  Canvas.SetLeft(draggedControl, pointOuEstLeDoigtParRapportAuCanvas.X - decalage.X);
                  Canvas.SetTop(draggedControl, pointOuEstLeDoigtParRapportAuCanvas.Y - decalage.Y);
              }
        }
 
        private void rectMouseUp(object sender, MouseEventArgs e)
        {
            Grid g = sender as Grid;
            String nomGrid = g.Name;
            // Arrondi des coordonnées, si la pièce est lâchée hors du plateau on la remet au plus près
            //Si le doigt du déplacement lache l'objet ou s'en va 
              if (fingerId == e.MouseDevice.GetHashCode())
              {
                  //fin du déplacement
                  draggedControl = null;
                  fingerId = -1;
                  if (Canvas.GetLeft(g) > 225) Canvas.SetLeft(g, 200);
                  else if (Canvas.GetLeft(g) < -175) Canvas.SetLeft(g, -150);
                  else Canvas.SetLeft(g, arrondiCinquantaine(Canvas.GetLeft(g)));
 
                  if (Canvas.GetTop(g) > -175) Canvas.SetTop(g, -200);
                  else if (Canvas.GetTop(g) < -575) Canvas.SetTop(g, -550);
                  else Canvas.SetTop(g, arrondiCinquantaine(Canvas.GetTop(g)));
              }
        }

[jmix90]

Plusieurs remarques:
1) Tu peux enlever le fingerId = e.MouseDevice.GetHashCode(); qui ne sert a rien dans le cas d'un seul pointeur (la souris)
2) Si tu regardes bien l'exemple tu remarques que les gestionnaires d'évenements sont placés sur le canvas général qui contient toutes les pièces (pas besoin d'un canvas par pièce);
3) Tu pourrais faire des UsersControls pour tes pièces aussi

Courage !

[totodof]

Etant donné que je dois bientôt rendre le projet, je pense conserver le drag and drop comme il est (celui que tu m'as débuggé au début). Par contre il me reste toujours le problème de mettre la pièce au premier plan. Vu que ma méthode avec les ZIndex ne fonctionne pas (et je ne comprends pas pourquoi), je pense supprimer l'élément et le recréer derrière, ce qui en théorie est le plus simple, mais je ne sais pas comment le recréer. La suppression fonctionne très bien, mais ensuite je dois recréer les éléments avec la bonne arborescence. J'ai créé un canvas can et un grid gr avec toutes les propriétés nécessaires et ensuite je fais comme suit :

Code :

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

1
2
3
 
can.Children.Add(gr);
MainGrid.Children.Add(can);

Bien entendu j'ai aussi pensé à affecter à la place du grid initial le nouveau grid, car c'est une variable globale traité dans les autres méthodes.

En fonction de ce que je fais, soit la pièce disparait (donc au bout de quelques clics on se retrouve dans une situation de pat ), soit il me dit que l'élément que j'ajoute est déjà lié à un Parent alors que je viens de le remove avec c.Children.Remove(g) où c et g sont respectivement l'ancien canvas et l'ancien grid, soit il perd l'information lors de l'appel des évènements.

Merci encore pour le temps que tu passes sur mon code

[jmix90]

Soit il me dit que l'élément que j'ajoute est déjà lié à un Parent alors que je viens de le remove avec c.Children.Remove(g) où c et g sont respectivement l'ancien canvas et l'ancien grid, soit il perd l'information lors de l'appel des évènements.

Tu peux mettre sa propriété Parent à null pour essayer ?

[totodof]

J'ai essayé cela ne fonctionne pas il supprime la pièce mais ne la réinsère pas. Je me demande si la solution du zIndex ne pourrait pas fonctionner se serait tellement propre. Par précaution j'ai fais un algorithme qui inverse le zIndex du Grid ayant le plus haut zIndex avec le Grid déplacé. Les valeurs s'échangent bien, donc ayant 32 Grids (donc 32 Canvas) le Grid déplacé prend bien la bonne valeur (vérifié par débugger) qui est de 32. Etant donné qu'il y a 32 Canvas, mon tuteur avait pensé que peut etre le zIndex ne peut pas etre supérieur au nombre de Canvas.

Bizarre...

[totodof]

Me revoilà après quelques jours. J'ai enfin pu trouver la solution à mon problème qui en fait était toute simple. La propriété Canvas.ZIndex s'applique seulement aux éléments du canvas parent. Etant donné que chaque pièce était un canvas, je ne changeais pas l'ordre des canvas dans l'ensemble des canvas, mais l'ordre du grid au sein de son propre canvas. Cela ne sert à rien. J'ai donc mis tous mes grids (pièces) dans un seul canvas, et mon drag and drop à fonctionné, avec les félicitations de mon professeur qui pensait que je n'y arriverai pas

Merci encore pour votre aide ^^ à bientôt

[jmix90]

Félicitations, et à bientôt !