Principi di programmazione in Silverlight 1.0

Gestione eventi del mouse

Tutti gli oggetti di tipo User Interface, ad esempio Canvas, Image, Path, Polygon, TextBlock ecc.., espongono questi eventi di azione del mouse:

• MouseEnter: si verifica quando il mouse si sovrappone all'oggetto;
• MouseLeave: quando il mouse esce dall'oggetto;
• MouseLeftButtonDown: scatenato quando l'utente preme il tasto sinistro del mouse ed il mouse si trova sovrapposto all'oggetto;
• MouseLeftButtonUp: scatenato quando l'utente rilascia il tasto sinistro del mouse ed il mouse si trova sovrapposto all'oggetto;
• MouseMove: si verifica quando il mouse è sopra l'oggetto e l'utente muove il mouse.

Tali eventi possono essere associati ad un oggetto in maniera dichiarativa direttamente nel codice XAML:

<Rectangle x:Name="NebulaRectangle1" MouseEnter="NebulaRectangle1_onEnter"> 
    <Rectangle.Fill> 
        <ImageBrush ImageSource="../Images/small_nebula.png"  
Stretch="None"/> 
    </Rectangle.Fill> 
</Rectangle>

Oppure attraverso il metodo AddEventListener degli oggetti stessi:

var _HelloTextBlock1 = plugIn.content.Root.FindName("HelloTextBlock1"); 
 
HelloTextBlock1_onMouseLeftButtonDown_TK = _HelloTextBlock1.AddEventListener("MouseLeftButtonDown","HelloTextBlock1_onMouseLeftButtonDown");

Il metodo dichiarativo richiede la scrittura di meno codice, il metodo programmatico ha il vantaggio che restituisce un token corrispondente al gestore dell'evento in modo che successivamente sia possibile rimuovere specificatamente tale gestore per liberare risorse di sistema:

_HelloTextBlock1.RemoveEventListener("MouseLeftButtonDown",HelloTextBlock1_onMouseLeftButtonDown_TK);

I metodi gestori degli eventi hanno due parametri molto utili: sender e mouseEventArgs; il parametro sender corrisponde all'istanza dell'oggetto che ha scatenato l'evento, noto questo oggetto è possibile manipolare molte delle sue proprietà:

function HelloTextBlock1_onMouseLeftButtonDown(sender, mouseEventArgs) 
{ 
    sender.Text = sender.Text + " !!!!";       
 
    sender.RemoveEventListener("MouseLeftButtonDown",HelloTextBlock1_onMouseLeftButtonDown_TK); 
}

In questo esempio l'evento click del mouse è associato ad un oggetto TextBlock e nel corrispondente gestore dell'evento al proprio testo vengono aggiunti quattro punti esclamativi. Con la funzione RemoveEventListener l'evento viene rimosso in seguito al primo click, rendendo la funzione attiva una sola volta.

Attraverso il parametro mouseEventArgs è possibile accedere alle informazioni del mouse e della tastiera in corrispondenza dell'evento, ad esempio se è stato premuto il tasto Shift o Ctrl oppure conoscere la posizione del mouse rispetto ad uno degli oggetti della scena. Note le coordinate del mouse è possibile creare effetti di mappatura di un'immagine in corrispondenza di alcune posizioni:

function NebulaRectangle1_onMove(sender, mouseEventArgs) 
{ 
    var p = mouseEventArgs.getPosition(sender); 
    if(p.x > 200 && p.x < 220 && p.y > 100 && p.y < 120) 
    { 
        alert(p.x + " / " + p.y); 
    } 
}

Combinando la gestione di più proprietà si possono riprodurre i classici effetti degli hyperlink come la sottolineatura e la comparsa della 'mano' al posto della freccia:

function HelloTextBlock1_onMouseEnter(sender, mouseEventArgs) 
{ 
    sender.TextDecorations = "Underline"; 
    sender.Cursor = "Hand"; 
}     
function HelloTextBlock1_onMouseLeave(sender, mouseEventArgs) 
{ 
    sender.TextDecorations = "none"; 
}

Gli oggetti dispongono anche dell'evento MouseMove che si scatena ad ogni movimento del mouse quando si trova sopra l'oggetto; attraverso la gestione combinata dell'evento MouseMove e degli eventi click è possibile associare al movimento del mouse la posizione degli oggetti e creare effetti di trascinamento, slider, puntatori del mouse personalizzati ed altro ancora:

var StarleftClick = false; 
function Star_onMouseLeftButtonDown(sender, mouseEventArgs) 
{ 
    StarleftClick = true; 
    beginX = mouseEventArgs.getPosition(null).x; 
    beginY = mouseEventArgs.getPosition(null).y; 
    sender.captureMouse(); 
} 
function Star_onMouseLeftButtonUp(sender, mouseEventArgs) 
{ 
    StarleftClick = false; 
    sender.releaseMouseCapture(); 
} 
function Star_onMouseEnter(sender, mouseEventArgs) 
{ 
    sender.Cursor = "Hand"; 
}     
function Star_onMouseMove(sender, mouseEventArgs) 
{         
    if(StarleftClick) 
    { 
        var currX = mouseEventArgs.getPosition(null).x; 
        var currY = mouseEventArgs.getPosition(null).y; 
        sender["Canvas.Left"] = sender["Canvas.Left"]  
+ currX - beginX; 
        sender["Canvas.Top"] = sender["Canvas.Top"]  
+ currY - beginY; 
        beginX = currX; 
        beginY = currY; 
    } 
} 

Nel codice di questo esempio sono gestiti gli eventi del mouse in corrispondenza dell'oggetto Star (un Path); con il metodo Star_onMouseLeftButtonDown, gestore dell'evento MouseLeftButtonDown, sono registrate le iniziali coordinate X e Y del mouse al momento della pressione del tasto sinistro, con il metodo captureMouse() dell'oggetto si cui si è fatto click si circoscrive l'analisi dell'input del mouse solo a quello specifico oggetto. A seguito del click sopra la figura la variabile StarleftClick viene impostata con un valore booleano corrispondente ad una pressione attiva o meno.

Con il metodo Star_onMouseMove, gestore dell'evento MouseMove, vengono controllate le azioni dell'utente; qualora sia mantenuta la pressione del tasto sinistro del mouse sull'oggetto, e quindi la variabile StarLeftClick sia True, ad ogni movimento del mouse ne sono calcolate le coordinate rispetto all'angolo superiore sinistro del plugin, questo è possibile impostando a null il parametro del metodo getPosition.

Successivamente viene calcolata la distanza effettiva coperta dal mouse sottraendo a ciascuna coordinata il corrispondente valore iniziale del mouse, questi valori vengono sommati algebricamente alla posizione dell'oggetto modificando i valori delle attached properties Canvas.Left e Canvas.Top. Nello stesso evento sono re-impostare le coordinate iniziali con le correnti in modo da rendere possibile sempre il calcolo di uno spostamento relativo. L'esecuzione di queste operazioni nel gestore dell'evento MouseMove crea l'effetto di trascinamento dell'oggetto.

Visualizza l'esempio 2

Attraverso semplici calcoli è possibile inserire dei vincoli al trascinamento di un oggetto, come è possibile vedere nel precedente esempio non è difficile realizzare un oggetto con comportamento simile ad uno slider.

Attenzione: Questo articolo contiene un allegato

Sullo stesso argomento

Commenti

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Segnala su: