Drag and Drop di bottoni in c#

Salve a tutti..mi chiamo Marco è ho deciso di riportare le mie conoscenze in questo blog in modo che possano essere utili a tutti.

Il primo argomento che vorrei trattare è la grafica drag and drop in c#,dato che è impossibile trovare spiegazioni tecniche e dettagliate sull' MSDN.

Una volta capito il funzionamento,scrivere codice per creare oggetti drag and drop è molto semplice. In particolare io mi sono occupato di lavorare con bottoni "DRAGGABILI" ;) .

Partiamo quindi con le prime informazioni di base,indispensabili per riuscire a capire l'argomento e per programmare in maniera ottiamale.

Durante il trascinamento,l'oggetto che viene trascinato è chiamato "origine",mentre l'oggetto in cui l'origine viene trascinata è chiamato "destinazione"; Quando si trascina un'oggetto vegono scatenati degli eventi sia dall'origine che dalla destinazione.Per controllare quindi il movimento di un bottone,o di un qualsiasi altro oggetto che vogliamo draggare,dobbiamo gestire questi eventi modificandoli per ottenere gli effetti desiderati.

Vediamo quindi di seguito i 4 eventi che sono associati ad una DESTINAZIONE di trascinamento,eventi che verranno utilizzati per creare dei bottoni drag and drop;

Essi sono:

DragEnter,DragOver,DragDrop,DragLeave;

Per rendere un oggetto draggabile,come ad esempio un bottone,dovremmo settare a true la proprietà "AllowDrop" del controllo stesso;

Vediamo in dettaglio di cosa si occupano gli eventi appena elencati;

DragEnter: si verifica quando la proprietà della destinazione AllowDrop è impostata a true e il cursore utilizzato per trascinare l'oggetto(bottone ad esempio) entra per la prima volta nell'area della destinazione. Per capirci meglio: supponiamo di avere 2 bottoni,A e B, in un pannello entrambi con la proprietà AllowDrop settata a true; supponiamo di dover trascinare A sopra a B. L'evento DRAGENTER si verificherà quando il cursore che sta trascinando A entra per la prima volta nell'area di B. Dato che questi eventi sono associati alla destinazione sarà proprio B a scatenare l'evento;

DragOver: si verifica quando il cursore si muove all'interno dell'area della destinazione;è quindi un evento successivo all'evento DragEnter;

DragDrop: si verifica quando rilasciamo il bottone del mouse in modo da rilasciare l'oggetto che trasciniamo sull'area desiderata;l'area su cui stiamo trascinando il bottone è la destinazione quindi sarà lei a scatenare l'evento.(Supponiamo di trascinare un bottone in un pannello).

DragLeave: si verifica quando il cursore abbandona l'area della destinazione ad esempio quando usciamo da un pannello;Non si verifica ogni volta che il cursore esce dalla destinazione ma solo quando usciamo dalla destinazione con un oggetto che stiamo trascinando;

Dopo aver visto gli eventi principali possiamo vedere un ulteriore evento che servirà per prendere un bottone;

Con l'evento MouseDown possiamo verificare quando il mouse è posto sopra il bottone con il tasto premuto in modo da capire quando iniziare a spostarlo.

(Oltre a MouseDown vi sono altri eventi che potrete usare a vostro piacimento).

ADESSO VEDREMO UN PO DI CODICE ;)

(faremo dei bottoni draggabili all'interno di un pannello);

vi starete domandando,ma come facciamo a sovrascrivere le funzioni che gesticono gli eventi e ad abbinarle agli oggetti?

Ogni evento sopra citato può essere abbinato ad un oggetto in questo modo:

button.DragEnter += new DragEventHandler(p_DragEnter);

(in visual studio appena avete scritto "+=" premendo tab si abbina automaticamente la funzione corretta)

(fra parentesi ce il nome della funzione che segna il comportamento dell'evento)

Se vogliamo fare in modo che l'oggetto si comporti in una certa maniera quando si scatena l'evento,non dobbiamo fare altro che modificare quella funzione (p_DragEnter) ridefinendola nel nostro codice in questa maniera:

public void p_DragEnter(object sender, DragEventArgs e)

{

//codice

}

Tutte le funzioni per il drag and drop si definiscono in questo modo tranne la funzione DragLeave che ha come secondo parametro un oggetto di tipo EventArgs;

Adesso che abbiamo visto come abbinare ad un oggetto l'evento e a definire ciò che avviene al verificarsi dell'evento vediamo i passi principali per effettuare il drag and drop;

Quando clicchiamo su un oggetto,in questo caso bottone, per trascinarlo(quindi al verificarsi dell'evento MouseDown) dobbiamo chiamare la funzione che da avvio all'azione di drag ovvero la funzione doDragDrop(button,DragDropEffect.Move);

con button si intende il bottone che ha scatenato l'evento mousedown ovvero quello che è stato cliccato per poi essere spostato,mentre con DragDropEffect.Move diciamo che l'effetto che vogliamo e quello dello spostamento.ci sono anche altri effetti ad esempio copia ecc.

poi vedrete voi l'effetto che volete anche se per questo caso il Move è ovviamente il più indicato dato che stiamo creando una grafica drag e drop;

vediamo quindi la funzione mousedown:

Prima di tutto vanno definiti sia il pannello che i bottoni;

i bottoni vanno abbinati al pannello tramite la proprietà Parent;

il bottone cliccato dovrà,come detto prima,avere la proprieta AllowDrop a true e la funzione mousedown abbinata;

Panel p=new Panel();

p.AllowDrop=true;

p.Parent=this; // this è il form corrente

p.DragDrop+= new DragEventsArgs(p_DragDrop);

Button b= new Button();

b.AllowDrop=true;

b.Bounds=new Rectangle(30,30,30,30);//i primi due 30 indicano la posizione sul pannello

//gli altri la dimensione del bottone

b.MouseDown+= new MouseEventhandler(ar_MouseDown);

b.Parent=p;//aggiungiamo il bottone al pannello;

public void ar_MouseDown(object sender, MouseEventArgs e)

{

//c è variabile di classe

c = (Button)sender; //sender è il bottone che genera l'evento ovvero quello cliccato

DoDragDrop(c, DragDropEffects.Move);

}

ora il nostro bottone sarà trascinabile ad esempio all'interno di un pannello(p in questo caso);

mentre il bottone viene trascinato nel pannello , si verifica un evento DragOver della destinazione pannello; L'evento DragDrop si verificherà sempre nel pannello dato che è lui la destinazione nel nostro caso;

quindi quando rilasceremo il mouse si scatenerà nel pannello l'evento DragDrop che andrà gestito;

private void p_DragDrop(Object sender,DragEventArgs e)

{

//sender sarà il pannello;

// adesso dobbiamo solo riposizionare il bottone

//che è in movimento ovvero c

Panel pp=(Panel)sender;

Point point=pp.PointToClient(new Point(e.X,e.Y)); //prende le coordinate attuali

//del cursore;

c.SetBounds(point.X,point.Y,30,30); //30 è la dimensione del bottone

}

Ecco fatto!! ;) il nostro bottone si "dragga" in giro per il pannello; potete crearne altri nella stessa maniera e con gli altri eventi potrete ottenere qualsiasi tipo di effetto ;)

Ovviamente questo codice lo dovrete mettere all'interno di una classe che estende dalla classe Form quindi evitate di fare copia e incolla a caso.Non ho riportato volutamente una classe completa in modo che affrontiate da soli tutti i problemi che,necessariamente,incontrerete nello sviluppo del codice;

Spero che questa rapida guida vi sia d'aiuto per capire meglio l'argomento che comunque dovrete approfondire.

Nel mese di marzo 2010 comunque sarà disponibile un mio framework che permetterà di implementare velocemente una grafica ben studiata.

Per avere il codice del framework(che sarà open) e per altre informazioni contattemi via email:

bisciasia@gmail.com;

Ciao a tutti ;)