Drag'n Drop items de ListBox dont le ItemContainerStyle est un canvas

Version imprimable

salut à tous

le controle ListBox nous permet un Binding sur ObservablleCollection
un Canvas nous permet de placer des Items suivant X,Y
un Thumb est sensible à l'évenement Drag'nDrop
je crois que (entre autre) "MITSU" qui a développé un truc semblable

j'ai bien réutiliser le XAML suivant (merci google) :

Code:

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
 
<ListBox Grid.Row="1" Name="listBox1" HorizontalAlignment="Left" Width="526" 
                 IsSynchronizedWithCurrentItem="True">
 
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Thumb                      
                       DragDelta="onDragDelta" 
                        Width="30" Height="30">
                    </Thumb> 
                </DataTemplate>
            </ItemsControl.ItemTemplate>
 
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
 
            <ListBox.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding Path=x }" />
                    <Setter Property="Canvas.Top" Value="{Binding Path=y}" />
                </Style>
            </ListBox.ItemContainerStyle>
 
        </ListBox>

et en code behind :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
public void onDragDelta(object sender, DragDeltaEventArgs e)
        {
 
            Thumb myElm = new Thumb();
            myElm = sender as Thumb;
 
            //le thumb change bien de couleur il est bien détecté :
            myElm.Background = Brushes.Black;
 
 
            //Move the Thumb :
 
            double left = Canvas.GetLeft(myElm);
            double top = Canvas.GetTop(myElm);
 
            Canvas.SetLeft(myElm, left + e.HorizontalChange);
            Canvas.SetTop(myElm, top + e.VerticalChange);
 
 
        }

je Bind mon ListBox avant tout ça:

Code:

1
2
3
 
//Mylist est aussi liée à un Datagrid et tout se passe bien
this.listBox1.ItemsSource = Mylist;

le Problème est que les Items sont bien affichés selon leur coordonnées dans ma nouvelle ListBox, mais le DragDrop ne marche pas rien ne bouge!!

j'ai crée un canvas(en dehore de la ListBox) contenant un Thumb avec une assignation direct de coordonnées

Code:

1
2
3
4
5
6
7
8
9
 
<Canvas Height="113" HorizontalAlignment="Left" Margin="227,12,0,0" Background="Azure"
                Name="canvas1" VerticalAlignment="Top" Width="463">
            <Thumb Name="mythamb"
                DragDelta="onDragDelta" 
                Canvas.Left="10" Canvas.Top="10"
                Width="30" Height="30">
            </Thumb>
        </Canvas>

et là mon Thumb bouge.

mais dans le cas des items thumb dans ma ListBox sa ne marche pas, alors en plaçant un point d’arrêt dans la Méthode : onDragDelta je remarque que les variable left et top sont à "NAN" ....alors que les Items ont leurs assignation via un Binding qui les place bien dans le canvas :

Code:

1
2
3
4
5
6
7
 
<ListBox.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding Path=x }" />
                    <Setter Property="Canvas.Top" Value="{Binding Path=y}" />
                </Style>
</ListBox.ItemContainerStyle>

c'est un contrôle très utile pour tous ...des idées?

comment il a fait (MITSU) 8O??

Salut,

Plutôt que de te baser sur le Canvas et ces méthodes GetTop et GetLeft, je travaillerais l'objet en lui même. Car si j'ai bien compris, tu as un objet (disons "ThumbDeplacable") qui a des propriétés 'x' et 'y'.

Du coup dans le l'événement DragDelta, je récupèrerai l'objet pour travailler sur ces propriétés :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public void onDragDelta(object sender, DragDeltaEventArgs e)
        {
 
            Thumb myElm = new Thumb();
            myElm = sender as Thumb;
 
            //le thumb change bien de couleur il est bien détecté :
            myElm.Background = Brushes.Black;
 
 
            //Move the Thumb :
 
            ThumbDeplacable thumbDeplacable = myElm.DataContext as ThumbDeplacable;
 
            if (thumbDeplacable != null) {
              thumbDeplacable.x = thumbDeplacable.x + e.HorizontalChange;
              thumbDeplacable.y = thumbDeplacable.y + e.VerticalChange;
            }
         }

Citation:
Envoyé par binoo
Salut,

Plutôt que de te baser sur le Canvas et ces méthodes GetTop et GetLeft, je travaillerais l'objet en lui même. Car si j'ai bien compris, tu as un objet (disons "ThumbDeplacable") qui a des propriétés 'x' et 'y'.

Du coup dans le l'événement DragDelta, je récupèrerai l'objet pour travailler sur ces propriétés :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 public void onDragDelta(object sender, DragDeltaEventArgs e) { Thumb myElm = new Thumb(); myElm = sender as Thumb; //le thumb change bien de couleur il est bien détecté : myElm.Background = Brushes.Black; //Move the Thumb : ThumbDeplacable thumbDeplacable = myElm.DataContext as ThumbDeplacable; if (thumbDeplacable != null) { thumbDeplacable.x = thumbDeplacable.x + e.HorizontalChange; thumbDeplacable.y = thumbDeplacable.y + e.VerticalChange; } }
Merci
cette méthode fonctionne (puisque y a un binding bidirectionnel).

mais je ne comprend toujours pas pourquoi la première logique qui est plus direct ne fait pas bouger mes items

Je pense que le fait que le Canvas soit dans un template fait qu'on ne retrouve pas nos petits par les méthode Canvas.GetTop et Canvas.GetLeft.

Après je sais que si tu n'as pas définis explicitement Canvas.Left et Canvas.Top dans le xaml, ces méthodes te retourneront NaN.
Tu peux tester ton code avec le Canvas en dehors de la ListBox et sans la définition de ses propriétés par exemple :
Code:

1 2 3 4 5 6 7 8 <Canvas Height="113" HorizontalAlignment="Left" Margin="227,12,0,0" Background="Azure" Name="canvas1" VerticalAlignment="Top" Width="463"> <Thumb Name="mythamb" DragDelta="onDragDelta" Width="30" Height="30"> </Thumb> </Canvas>
Les Canvas.Left et Top ne devraient pas fonctionner. D'ailleurs du coup, il est plus sympa d'utiliser

Code:

Vector offset = VisualTreeHelper.GetOffset(myElm);

qui lui fonctionne dans tous les cas de figures.

Mais dans le cas de la ListBox, cela ne donne rien de concluant non plus. :?

20/04/2011, 17h11
rdh123

je crois qu'un contrôle du type "canvas avec une propriété ItemsSource " doit exister.
un graphe (pas juste une liste ou une treeview) avec des neuds, connexions et toutes les fonctionnalités (dragDrop, add, menu contextuel..) est très intéressant pour tous.
20/04/2011, 17h50
binoo
Citation:

Envoyé par rdh123

je crois qu'un contrôle du type "canvas avec une propriété ItemsSource " doit exister.

Par "doit exister", tu veux dire "devrait exister dans les contrôles de base de Microsoft". Si c'est ça, moi ça me plairait bien aussi ! :P

Sinon il faut savoir qu'on trouve des outils/composants de ce type sur internet (payant en tout cas c'est sûr). Par exemple :
20/04/2011, 19h32
rdh123

merci pour ton aide

alors voila :
le Canvas ne reconnais pas le thumb car il reconnait le ListBosItem, c'est ce dernier qu'il faut retrouver ou mieux mémoriser dans la propriété Tag du Thumb:

Code:

1
2
3
4
5
6
7
8
9
 
<ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Thumb   Tag="{  Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}} }"                
                                                 DragDelta="onDragDelta" 
                                                 Template="{ StaticResource Mytemplate}">
                                        </Thumb>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>

et dans la méthode onDragDelta il faut l'utiliser (Tag):

Code:

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
 
public void onDragDelta(object sender, DragDeltaEventArgs e)
        {
 
            if ((sender as Thumb)!=null)
            {
                Thumb mythumb = new Thumb();
                mythumb = sender as Thumb;
 
 
                var ee = mythumb.Tag;
 
                UIElement myElm = new UIElement();
 
                myElm = ee as UIElement;
 
                double left = Canvas.GetLeft(myElm);
                double top = Canvas.GetTop(myElm);
 
                Canvas.SetLeft(myElm, left + e.HorizontalChange);
                Canvas.SetTop(myElm, top + e.VerticalChange);
 
            }
 
        }

donc voila j'ai une ListBox avec une affichage dans un Canvas qui supporte le DragDrop.

reste :
le Binding à une collection qui est l'image d'une logique de connexion entre les items......à suivre.