Drag And Drop dans une Grid

Version imprimable

01/04/2008, 10h30
amandinerenard

Drag And Drop dans une Grid

Bonjour Thomas,

J'ai une IHM avec comme control parent une Grid, et des controls enfants (des textBox, textBlock, StackPanel, ListView, ComboBox etc...)
J'aimerai pouvoir faire du drag and drop de mes controls enfants au sein de ma Grid. C'est à dire que j'aimerai que les controls lorsqu'ils sont dropper ils detectent dans quelle ligne et quelle colonne de la Grid ils vont être dropper, et du coup ils s'alignent bien. Tu comprend ce que je veux dire ?
J'ai trouvé pas mal de code source sur le drap drop dans un canvas, ou dans une listView, mais jamais dans une grid. Tu sais si quelque chose a déja été codé ?

Merci pour ton aide
Amandine

Salut,

Le principe du Drag & Drop une fois compris s'adapte assez simplement sur le contrôle souhaité. Le principe reste similaire ;)

Un petit exemple de drag and drop entre les deux premières Row (il copie le background de la ligne et la glisse sur l'autre :P) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <Grid>
 
    <Grid.RowDefinitions>
      <RowDefinition Height="100" />
      <RowDefinition Height="100" />
      <RowDefinition Height="100" />
    </Grid.RowDefinitions>
 
    <Grid x:Name="row1" Grid.Row="0" Background="AliceBlue" AllowDrop="True" 
          MouseMove="row1_MouseMove"
          Drop="row1_Drop" DragOver="row1_DragOver"
          />
    <Grid x:Name="row2" Grid.Row="1" Background="Red" AllowDrop="True" 
          MouseMove="row2_MouseMove"
          Drop="row2_Drop" DragOver="row2_DragOver"
          />
    <Button Grid.Row="2" x:Name="Btn1" Content="Init color" Height="23" Width="100" HorizontalAlignment="Center"
            VerticalAlignment="Center" Click="Btn1_Click" />
 
  </Grid>

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
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
  public partial class Window1 : Window {
 
    public Window1() {
      InitializeComponent();
    }
 
    private void Btn1_Click( object sender, RoutedEventArgs e ) {
      row1.Background = Brushes.AliceBlue;
      row2.Background = Brushes.Red;
    }
 
    private void row1_MouseMove( object sender, MouseEventArgs e ) {
      if( e.LeftButton == MouseButtonState.Pressed ) {
        DragDropEffects effects;
        DataObject obj = new DataObject();
 
        obj.SetData( typeof( Brush ), this.row1.Background );
 
        effects = DragDrop.DoDragDrop( this.row1, obj, DragDropEffects.Copy | DragDropEffects.Move );
      }
    }
 
    private void row1_DragOver( object sender, DragEventArgs e ) {
      if( e.Data.GetDataPresent( typeof( Brush ) ) ) {
        e.Effects = System.Windows.DragDropEffects.Copy;
      }
      else {
        e.Effects = System.Windows.DragDropEffects.None;
      }
    }
 
    private void row1_Drop( object sender, DragEventArgs e ) {
      if( e.Data.GetDataPresent( typeof( Brush ) ) ) {
        row1.Background = (Brush)e.Data.GetData( typeof( Brush ) );
      }
    }
 
 
 
    private void row2_MouseMove( object sender, MouseEventArgs e ) {
      if( e.LeftButton == MouseButtonState.Pressed ) {
        DragDropEffects effects;
        DataObject obj = new DataObject();
 
        obj.SetData( typeof( Brush ), this.row2.Background );
 
        effects = DragDrop.DoDragDrop( this.row2, obj, DragDropEffects.Copy | DragDropEffects.Move );
      }
    }
 
    private void row2_DragOver( object sender, DragEventArgs e ) {
      if( e.Data.GetDataPresent( typeof( Brush ) ) ) {
        e.Effects = System.Windows.DragDropEffects.Copy;
      }
      else {
        e.Effects = System.Windows.DragDropEffects.None;
      }
    }
 
    private void row2_Drop( object sender, DragEventArgs e ) {
      if( e.Data.GetDataPresent( typeof( Brush ) ) ) {
        row2.Background = (Brush)e.Data.GetData( typeof( Brush ) );
      }
    }
 
  }

Pour ton cas tes contrôles se situeront dans des conteneurs (moi j'ai pris des Grid - row1 et row2 -) et le drag and drop est appliqué entre ces deux conteneurs.
A voir si c'est la meilleure solution ;)

01/04/2008, 18h07
Thomas Lebrun

Bon, et bien que pourrais-je dire de plus après tout cela :P

:salut:

Merci pour ta réponse, je vous envoi ce que j'ai fait en m'inspirant du code, c'est assez pratique. ça permet de faire du drag and drop de controls entre les différentes cellules d'une Grid. Pour le moment je fais que du drap ans drop de textBlock mais c facilement extensible pour tous les controls de WPF. :D

Window1.xaml

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
29
30
31
32
33
34
35
36
37
38
39
<Window x:Class="WpfApplication1.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">
    <Grid Name="myGrid" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition  />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition  />
            <ColumnDefinition  />
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="row0Col0" Grid.Row="0" Background="AliceBlue" AllowDrop="True" 
          MouseMove="row_MouseMove"
          Drop="row_Drop" DragOver="row_DragOver" >
            <TextBlock Height="21" Name="Text1" Text="Text1" ></TextBlock>
        </StackPanel>        
        <StackPanel x:Name="row1Col0" Grid.Row="1" Background="Red" AllowDrop="True" 
          MouseMove="row_MouseMove"
          Drop="row_Drop" DragOver="row_DragOver">
           <TextBlock Height="21" Name="Text2" Text="Text2" ></TextBlock>
        </StackPanel>
        <StackPanel  x:Name="col1Row0" Grid.Column="1" Grid.Row="0" Background="Red" AllowDrop="True" 
             MouseMove="row_MouseMove"
          Drop="row_Drop" DragOver="row_DragOver">
            <TextBlock Height="21" Text="Text3" Name="Text3"></TextBlock>           
        </StackPanel>
        <StackPanel x:Name="Col1Row1" Grid.Column="1" Grid.Row="1" Background="AliceBlue" AllowDrop="True" 
             MouseMove="row_MouseMove"
          Drop="row_Drop" DragOver="row_DragOver">
            <TextBlock Height="21" Text="Text4" Name="Text4" ></TextBlock>           
        </StackPanel>
 
 
    </Grid>
 
</Window>

Window1.Xaml.cs

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
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
 
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Diagnostics;
 
namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
 
 
 
        private void row_MouseMove(object sender, MouseEventArgs e)
        {
 
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                DragDropEffects effects;
                DataObject obj = new DataObject();
                obj.SetData(((StackPanel)sender).Children[0].GetType(), ((StackPanel)sender).Children[0]);
                effects = DragDrop.DoDragDrop(((StackPanel)sender), obj, DragDropEffects.Copy | DragDropEffects.Move);
 
            }
        }
 
        private void row_DragOver(object sender, DragEventArgs e)
        {
 
 
            if (e.Data.GetDataPresent(typeof(TextBlock)))
            {
                Trace.WriteLine("row1_DragOver" + e.Data.GetDataPresent(typeof(UIElement)));
                e.Effects = System.Windows.DragDropEffects.Copy;
            }
            else
            {
                Trace.WriteLine("row1_DragOver ne marche pas");
                e.Effects = System.Windows.DragDropEffects.None;
            }
        }
 
        private void row_Drop(object sender, DragEventArgs e)
        {
 
           Trace.WriteLine("row1_Drop" + e.Data.GetDataPresent(typeof(UIElement)));
            string format = e.Data.GetFormats()[0];
            if (format == "System.Windows.Controls.TextBlock")
            {
                StackPanel gridsource = (StackPanel)this.FindName(((StackPanel)((TextBlock)e.Data.GetData(typeof(TextBlock))).Parent).Name);
                gridsource.Children.Remove((TextBlock)e.Data.GetData(typeof(TextBlock)));
 
               // ((TextBlock)e.Data.GetData(typeof(TextBlock))).HorizontalAlignment = HorizontalAlignment.Right;
                ((StackPanel)sender).Children.Add((TextBlock)e.Data.GetData(typeof(TextBlock)));
            }   
        }

13/05/2013, 17h41
antoine157

bonjour

j'ai bien saisie vos explications, pourtant je n'arrive pas a étendre ceci à un dataGrid

pour être plus précis je cherche a draguer pour droper dans un tree view

toute aide seras la bienvenu

merci d'avance