Procedura dettagliata: abilitare il trascinamento della selezione in un controllo utente
In questa procedura dettagliata viene illustrato come creare un controllo utente personalizzato in grado di partecipare al trasferimento dei dati tramite trascinamento della selezione in Windows Presentation Foundation (WPF).
In questa procedura dettagliata si creerà un oggettoUserControl WPF personalizzato che rappresenta una forma circolare. Si implementeranno funzionalità nel controllo per consentire il trasferimento di dati tramite trascinamento della selezione. Ad esempio, se si trascina da un controllo Circle a un altro, i dati del colore di riempimento vengono copiati dal cerchio di origine alla destinazione. Se si trascina da un controllo Circle a un controllo TextBox, la rappresentazione di stringa del colore di riempimento viene copiata in TextBox. Si creerà inoltre una piccola applicazione che contiene due controlli Panel e un controllo TextBox per verificare la funzionalità di trascinamento della selezione. Si scriverà il codice che consente l'elaborazione nei pannelli dei dati Circle trascinati, per permettere lo spostamento o la copia dei cerchi dall'insieme Children di un pannello all'altro.
In questa procedura dettagliata vengono illustrate le attività seguenti:
Creare un controllo utente personalizzato.
Consentire di utilizzare il controllo utente come origine di trascinamento.
Consentire di utilizzare il controllo utente come destinazione di trascinamento.
Consentire a un pannello di ricevere dati trascinati dal controllo utente.
Prerequisiti
Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:
- Visual Studio 2010
Creazione di un progetto di applicazione
In questa sezione verrà creata l'infrastruttura dell'applicazione che include una pagina principale con due pannelli e un oggetto TextBox.
Per creare il progetto
Creare un nuovo progetto di applicazione WPF in Visual Basic o Visual C#, denominato DragDropExample. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.
Aprire MainWindow.xaml.
Aggiungere il seguente markup tra i tag Grid di apertura e chiusura.
Tramite questo markup viene creata l'interfaccia utente per l'applicazione di prova.
Aggiunta di un nuovo controllo utente al progetto
In questa sezione verrà aggiunto un nuovo controllo utente al progetto.
Per aggiungere un nuovo controllo utente
Scegliere Aggiungi controllo utente dal menu Progetto.
Nella finestra di dialogo Aggiungi nuovo elemento modificare il nome in Circle.xaml e scegliere Aggiungi.
Circle.xaml e il relativo code-behind verranno aggiunti al progetto.
Aprire il file Circle.xaml.
Nel file saranno inclusi gli elementi dell'interfaccia utente del controllo utente.
Aggiungere il seguente markup all'oggetto Grid radice per creare un controllo utente semplice con un cerchio blu come interfaccia utente.
Aprire il file Circle.xaml.cs o Circle.xaml.vb.
In C# aggiungere il codice seguente dopo il costruttore predefinito per creare un costruttore di copia. In Visual Basic aggiungere il codice seguente per creare sia il costruttore predefinito sia un costruttore di copia.
Per consentire la copia del controllo utente, aggiungere un metodo del costruttore di copia nel file code-behind. Nel controllo utente Circle semplificato, verranno copiati solo il riempimento e la dimensione del controllo utente.
Per aggiungere il controllo utente alla finestra principale
Aprire MainWindow.xaml.
Aggiungere il codice XAML seguente al tag Window di apertura per creare un riferimento allo spazio dei nomi XML nell'applicazione corrente.
xmlns:local="clr-namespace:DragDropExample"Nel primo oggetto StackPanel aggiungere il codice XAML seguente per creare due istanze del controllo utente Circle nel primo pannello.
Il codice XAML completo per il pannello ha un aspetto simile al seguente.
Implementazione di eventi dell'origine di trascinamento nel controllo utente
In questa sezione, verrà eseguito l'override del metodo OnMouseMove e verrà avviata l'operazione di trascinamento della selezione.
Se viene avviato un trascinamento (viene premuto un pulsante del mouse e viene spostato il mouse), i dati verranno compressi per il trasferimento in DataObject. In questo caso, il controllo Circle comprimerà tre elementi di dati: una rappresentazione di stringa del colore di riempimento, una doppia rappresentazione dell'altezza e una copia di se stesso.
Per avviare un'operazione di trascinamento della selezione
Aprire il file Circle.xaml.cs o Circle.xaml.vb.
Aggiungere l'override seguente di OnMouseMove per fornire la gestione delle classi per l'evento MouseMove.
Tramite questo override di OnMouseMove vengono eseguite le attività seguenti:
Viene verificato se il pulsante sinistro del mouse viene premuto mentre il mouse viene spostato.
Vengono compressi i dati di Circle in un oggetto DataObject. In questo caso, il controllo Circle comprime tre elementi di dati: una rappresentazione di stringa del colore di riempimento, una doppia rappresentazione dell'altezza e una copia di se stesso.
Viene chiamato il metodo DragDrop.DoDragDrop statico per avviare l'operazione di trascinamento della selezione. I tre parametri seguenti vengono passati al metodo DoDragDrop:
dragSource: riferimento a questo controllo.
data: DataObject creato nel codice precedente.
allowedEffects: operazioni di trascinamento della selezione consentite, ovvero Copy o Move.
Premere F5 per compilare ed eseguire l'applicazione.
Fare clic su uno dei controlli Circle e trascinarlo sui pannelli, sull'altro controllo Circle e su TextBox. Quando si trascina su TextBox, il cursore cambia aspetto per indicare uno spostamento.
Mentre si trascina un controllo Circle su TextBox, premere il tasto CTRL. Si noti il cambiamento di aspetto del cursore per indicare una copia.
Trascinare un controllo Circle su TextBox. La rappresentazione di stringa del colore di riempimento del controllo Circle viene aggiunta a TextBox.
Per impostazione predefinita, il cursore cambia aspetto durante un'operazione di trascinamento della selezione per indicare l'effetto del trascinamento dei dati. È possibile personalizzare i commenti e i suggerimenti forniti all'utente tramite la gestione dell'evento GiveFeedback e l'impostazione di un cursore diverso.
Per fornire commenti e suggerimenti all'utente
Aprire il file Circle.xaml.cs o Circle.xaml.vb.
Aggiungere l'override seguente di OnGiveFeedback per fornire la gestione delle classi per l'evento GiveFeedback.
Tramite questo override di OnGiveFeedback vengono eseguite le attività seguenti:
Vengono controllati i valori di Effects impostati nel gestore dell'evento DragOver della destinazione.
Viene impostato un cursore personalizzato basato sul valore di Effects. Il cursore ha lo scopo di fornire commenti e suggerimenti visivi all'utente in merito all'effetto del trascinamento dei dati.
Premere F5 per compilare ed eseguire l'applicazione.
Trascinare uno dei controlli Circle sui pannelli, sull'altro controllo Circle e su TextBox. Si noti che i cursori sono ora i cursori personalizzati specificati nell'override di OnGiveFeedback.
Selezionare il testo verde a partire da TextBox.
Trascinare il testo verde su un controllo Circle. Si noti che i cursori predefiniti sono visualizzati per indicare gli effetti dell'operazione di trascinamento della selezione. Il cursore dei commenti e suggerimenti è sempre impostato dall'origine di trascinamento.
Implementazione di eventi della destinazione di trascinamento nel controllo utente
In questa sezione, si specificherà che il controllo dell'utente è una destinazione di trascinamento, si eseguirà l'override dei metodi che consentono l'utilizzo del controllo utente come destinazione di trascinamento e si elaboreranno i dati trascinati in esso.
Per consentire di utilizzare il controllo utente come destinazione di trascinamento
Aprire il file Circle.xaml.
Nel tag di apertura UserControl, aggiungere la proprietà AllowDrop e impostarla su true.
Il metodo OnDrop viene chiamato quando la proprietà AllowDrop è impostata su true e i dati dell'origine di trascinamento vengono trascinati nel controllo utente Circle. In questo metodo i dati trascinati verranno elaborati e applicati al controllo Circle.
Per elaborare i dati trascinati
Aprire il file Circle.xaml.cs o Circle.xaml.vb.
Aggiungere l'override seguente di OnDrop per fornire la gestione delle classi per l'evento Drop.
Tramite questo override di OnDrop vengono eseguite le attività seguenti:
Viene utilizzato il metodo GetDataPresent per controllare se i dati trascinati contengono un oggetto di tipo stringa.
Viene utilizzato il metodo GetData per estrarre i dati di tipo stringa se presenti.
Viene utilizzato un oggetto BrushConverter per tentare di convertire la stringa in Brush.
Se la conversione ha esito positivo, il pennello viene applicato a Fill di Ellipse che fornisce l'interfaccia utente del controllo Circle.
L'evento Drop viene contrassegnato come gestito. È necessario contrassegnare l'evento di trascinamento come gestito per segnalare ad altri elementi che lo ricevono che l'evento è stato gestito dal controllo utente Circle.
Premere F5 per compilare ed eseguire l'applicazione.
Selezionare il testo verde in TextBox.
Trascinare il testo su un controllo Circle. Il controllo Circle passa dal blu al verde.
Digitare il testo verde in TextBox.
Selezionare il testo ver in TextBox.
Trascinare il testo su un controllo Circle. Si noti che il cursore cambia per indicare che è consentito il trascinamento ma il colore non cambia perché ver non è un colore valido.
Trascinare dal controllo Circle verde sul controllo Circle blu. Il controllo Circle passa dal blu al verde. Si noti che il cursore visualizzato dipende dal fatto che l'origine di trascinamento sia TextBox o Circle.
L'impostazione della proprietà AllowDrop su true e l'elaborazione dei dati trascinati sono le uniche condizioni necessarie per consentire l'utilizzo di un elemento come destinazione di trascinamento. Tuttavia, per fornire una migliore esperienza utente, è necessario gestire gli eventi DragEnter, DragLeave e DragOver. In tali eventi è possibile eseguire controlli e fornire commenti e suggerimenti aggiuntivi all'utente prima del trascinamento dei dati.
Quando i dati vengono trascinati sul controllo utente Circle, il controllo dovrebbe notificare all'origine di trascinamento se è possibile elaborare dati trascinati. Se il controllo non è in grado di elaborare i dati, è necessario rifiutare il trascinamento. Per eseguire tale operazione, verrà gestito l'evento DragOver e verrà impostata la proprietà Effects.
Per verificare che il trascinamento di dati sia consentito
Aprire il file Circle.xaml.cs o Circle.xaml.vb.
Aggiungere l'override seguente di OnDragOver per fornire la gestione delle classi per l'evento DragOver.
Tramite questo override di OnDragOver vengono eseguite le attività seguenti:
Premere F5 per compilare ed eseguire l'applicazione.
Selezionare il testo ver in TextBox.
Trascinare il testo su un controllo Circle. Si noti che il cursore cambia per indicare che il trascinamento non è consentito perché ver non è un colore valido.
È possibile migliorare ulteriormente l'esperienza utente applicando un'anteprima dell'operazione di trascinamento della selezione. Per il controllo utente Circle, verrà eseguito l'override dei metodi OnDragEnter e OnDragLeave. Quando i dati vengono trascinati sul controllo, l'oggetto Fill di sfondo corrente viene salvato in una variabile segnaposto. La stringa viene quindi convertita in un pennello e applicata all'oggetto Ellipse che fornisce l'interfaccia utente del controllo Circle. Se i dati vengono trascinati all'esterno di Circle senza essere rilasciati, il valore di Fill originale viene riapplicato al controllo Circle.
Per visualizzare l'anteprima degli effetti dell'operazione di trascinamento
Aprire il file Circle.xaml.cs o Circle.xaml.vb.
Nella classe Circle dichiarare una variabile Brush privata denominata _previousFill e inizializzarla su null.
Aggiungere l'override seguente di OnDragEnter per fornire la gestione delle classi per l'evento DragEnter.
Tramite questo override di OnDragEnter vengono eseguite le attività seguenti:
Viene salvata la proprietà Fill di Ellipse nella variabile _previousFill .
Vengono eseguiti gli stessi controlli eseguiti nel metodo OnDrop per determinare se è possibile convertire i dati in un oggetto Brush.
Se i dati sono convertiti in un oggetto Brush valido, vengono applicati a Fill di Ellipse.
Aggiungere l'override di OnDragLeave seguente per fornire la gestione delle classi per l'evento DragLeave.
Tramite questo override di OnDragLeave vengono eseguite le attività seguenti:
Premere F5 per compilare ed eseguire l'applicazione.
Selezionare il testo verde in TextBox.
Trascinare il testo su un controllo Circle senza rilasciarlo. Il controllo Circle passa dal blu al verde.
Allontanare il testo dal controllo Circle. Il controllo Circle passa dal verde al blu.
Consentire a un pannello di ricevere i dati trascinati
In questa sezione si consentirà ai pannelli che ospitano i controlli utente Circle di fungere da destinazioni di trascinamento per i dati di Circle trascinati. Verrà implementato il codice che consente di spostare un controllo Circle da un pannello a un altro o di creare una copia di un controllo Circle tenendo premuto il tasto CTRL mentre si trascina un controllo Circle.
Per consentire di utilizzare il pannello come destinazione di trascinamento
Aprire MainWindow.xaml.
Come illustrato nel codice XAML seguente, in ciascun controllo StackPanel, aggiungere i gestori per gli eventi DragOver e Drop. Assegnare al gestore dell'evento DragOver il nome panel_DragOver e al gestore dell'evento Drop il nome panel_Drop.
Aprire il file MainWindows.xaml.cs o MainWindow.xaml.vb.
Aggiungere il codice seguente al gestore dell'evento DragOver.
Tramite il gestore dell'evento DragOver vengono eseguite le attività riportate di seguito:
Viene verificato che i dati trascinati contengano i dati "Object" compressi in DataObject dal controllo utente Circle e passati nella chiamata a DoDragDrop.
Se i dati "Object" sono presenti, viene verificato se è stato premuto il tasto CTRL.
Se il tasto CTRL è stato permuto, la proprietà Effects viene impostata su Copy. In caso contrario, la proprietà Effects viene impostata su Move.
Aggiungere il codice seguente al gestore dell'evento Drop.
Tramite il gestore dell'evento Drop vengono eseguite le attività riportate di seguito:
Viene verificato se l'evento Drop è già stato gestito. Ad esempio, se un controllo Circle viene trascinato in un altro controllo Circle che gestisce l'evento Drop, si desidera evitare che tale evento sia gestito anche dal pannello che contiene Circle.
Se l'evento Drop non è gestito, viene verificato se è stato premuto il tasto CTRL.
Se il tasto CTRL viene premuto quando si verifica l'evento Drop, viene creata una copia del controllo Circle che viene aggiunta all'insieme Children di StackPanel.
Se il tasto CTRL non viene premuto, il controllo Circle viene spostato dall'insieme Children del pannello padre all'insieme Children del pannello in cui è stato trascinato.
Viene impostata la proprietà Effects per notificare al metodo DoDragDrop se è stata eseguita un'operazione di spostamento o copia.
Premere F5 per compilare ed eseguire l'applicazione.
Selezionare il testo verde a partire da TextBox.
Trascinare il testo su un controllo Circle.
Trascinare un controllo Circle dal pannello sinistro al pannello destro. Il controllo Circle viene rimosso dall'insieme Children del pannello sinistro e aggiunto all'insieme Children del pannello destro.
Trascinare un controllo Circle dal pannello in cui si trova all'altro pannello tenendo premuto il tasto CTRL. Il controllo Circle viene copiato e la copia viene aggiunta all'insieme Children del pannello ricevente.
Vedere anche
Concetti
Cenni preliminari sul trascinamento della selezione
Cronologia delle modifiche
Data |
Cronologia |
Motivo |
|---|---|---|
|
Aprile 2011 |
Argomento aggiunto. |
Commenti e suggerimenti dei clienti. |