sabato 26 febbraio 2011

Silvelitght tooltiptext in Textbox VB.Net e C#


Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_silverlight-visualizzare-in-una-textbox-_1007.aspx



Introduzione


Vedremo in questo articolo, come applicare ad un controllo textbox di Silverlight 4, un tool tip text al passaggio del mouse, come mostrato in figura 1.


Figura 1


In passato nella creazione delle applicazioni di tipo Windows, si applicava ai controlli di testo, un testo di aiuto, definito come tool tip text, ossia un suggerimento visivo, utile all’utente, quando il mouse si avvicinava in prossima del controllo.
In Silverlight, tramite la classe ToolTipService possiamo dotare i vari controlli di tale funzionalità.
Si crea un nuovo progetto di tipo Silverlight 4, aggiungere alla pagina, un controllo di tipo textbox.
Tra il tag di apertura e chiusura della textbox inserire il tag tooltipservice, ed al suo interno un controllo di tipo texblock.
Qui di seguito si riporta un esempio di codice XAML.


<TextBox Height="23" HorizontalAlignment="Left" Name="TextBox1" VerticalAlignment="Top" Width="120" Margin="12,36,0,0" >


<ToolTipService.ToolTip >


<TextBlock Text="Testo da visualizzare al passaggio del mouse"></TextBlock>


</ToolTipService.ToolTip>


</TextBox>



Come si è visto dal codice precedente, dopo aver impostato le varie proprietà del controllo Textbox, tra il tag di apertura <textbox > e chiusura </textbox> è stato aggiunto un controllo di tipo <tooltipservie.tooltip> il quale al suo interno ha un controllo per la visualizzazione del testo.
In questo modo abbiamo applicato al controllo Textbox un suggerimento al passaggio del mouse, proprio come mostrato in figura 1.
La creazione di un tooltiptext si può estendere, per esempio aggiungendo un immagine come mostrato in figura 2.



Figura 2


La possibilità di rendere il suggerimento più accattivante è molto semplice, basterà aggiungere altri controlli.
Riportiamo qui di seguito il codice XAML per generare un suggerimento simile a quello mostrato in figura 2, naturalmente nel progetto, va aggiunto una risorsa o meglio un immagine.
Per aggiungere l'immagine come risorsa, tramite il pulsante destro sul nome del progetto (oppure in una cartella all’interno del progetto) e dal menu di scelta rapida, selezionare aggiungi elemento esistente, dalla finestra che viene aperta, selezionare l’immagine di vostro interesse.
Qui di seguito si riporta il codice XAML.


<TextBox Height="23" HorizontalAlignment="Left" Margin="20,89,0,0" Name="TextBox2" VerticalAlignment="Top" Width="120" >


<ToolTipService.ToolTip>


<StackPanel>


<TextBlock Text="Testo"></TextBlock>


<Image Source="informazioni.png"></Image>


</StackPanel>


</ToolTipService.ToolTip>


</TextBox>




Come si vede dal codice precedente, dopo la classe TooltipService è stato aggiunto il controllo StackPanel, questo pannello permette di aggiungere una serie di controlli, nel nostro caso, un controllo di tipo TextBlock ed un controllo image, dove la proprietà source è impostata con il percorso e nome del file immagine.


Conclusioni


Si è visto come applicare alle nostre applicazioni la possibilità di dotare alcuni determinati oggetti, come le textbox, dei suggerimenti, utili per fornire suggerimenti agli utenti.
I suggerimenti, permettono di aiutare l’utente nell’utilizzo della nostra applicazione.

Nessun commento: