Menù, Icone e Visual StudioGli sviluppatori
.NET utilizzano, nelle loro applicazioni, i classici menu messi a disposizione da
Visual Studio .NET e in pochi secondi, grazie al
Drag & Drop, hanno a disposizione il loro bel menu già pre-confezionato. Spesso, però, gli sviluppatori hanno la necessità, o più semplicemente, la voglia, di personalizzare la loro applicazione non solo dal punto di vista delle funzioni ma anche da quello prettamente grafico. Nasce, così, l'esigenza di colorare e personalizzare gli elementi del form e in modo particolare i menu. Per fare ciò, esistono due possibilità, o si ricorre a librerie esterne che, il più delle volte, sono a pagamento, oppure, muniti di un pizzico di volontà in più, si scrive del codice per rendere i menu più "attraenti". Vediamo, quindi, come personalizzare un menu utilizzando del codice e qualche icona.
Implementazione di un menù con IconePer prima cosa, tramite
Drag & Drop inseriamo nel form un
MainMenu e successivamente ne creiamo la struttura desiderata :
Notate che le voci del menu inserite sono del tutto fittizie, non è importante in questa fase inserire le varie voci che in realtà dovrebbero comparire, per adesso ci serve soltanto creare i vari
MenuItem e solo successivamente imposteremo le proprietà che ci interessano.
Il secondo passo, molto importante, è impostare la proprietà
OwnerDraw di ogni
MenuItem su
True, in questo modo avvisiamo il sistema che saremo noi a disegnare da codice le varie voci del menu.
Il terzo ed ultimo passo consiste nello scrivere il nostro bel codice che ci permetterà di inserire icone, di scrivere il testo desiderato con il font, il colore e l'allineamento che desideriamo.
Per ogni
MenuItem prenderemo in considerazione solo due eventi :
MeasureItem e
DrawItem.
Ad esempio per la voce del menu File (MenuItem1) :
Private Sub MenuItem1_MeasureItem(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MeasureItemEventArgs) Handles MenuItem1.MeasureItem
e.ItemHeight = SystemInformation.MenuHeight
e.ItemWidth = 80
End Sub
Con queste due semplici righe di codice impostiamo altezza e larghezza del singolo
MenuItem, o meglio, impostiamo le dimensioni del rettangolo che lo contiene. Impostando l'altezza su
SystemInformation.MenuHeight diciamo al sistema di assegnare al
MenuItem una altezza di default ma in realtà potremmo inserire un qualsiasi valore in pixel, così come è stato fatto per la larghezza.
Sfruttando le proprietà e i metodi dell'oggetto e (
System.Windows.Forms.MeasureItemEventArgs) si possono decidere anche tante altre caratteristiche riguardanti la forma del
MenuItem, basta perdere un po' di tempo con
e.Graphics!
Private Sub MenuItem1_DrawItem(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Handles MenuItem1.DrawItem
e.DrawBackground() '1.
Dim Icn As New Icon(Application.StartupPath & "\icone\SIZEGRIP.ICO") '2.
e.Graphics.DrawIcon(Icn, e.Bounds.X, e.Bounds.Y) '3.
Dim fnt As New Font(Me.Font, FontStyle.Bold) '4
e.Graphics.DrawString("File", fnt, Brushes.Black, 20, e.Bounds.Y) '5
Icn.Dispose() '6
fnt.Dispose() '7
End Sub
Con la riga
1. diciamo al sistema di disegnare lo sfondo del
MenuItem che altrimenti sarebbe del classico grigio form, è quindi facoltativa.
Successivamente, nella riga
2, creiamo un nuovo oggetto
Icon, passando come argomento al costruttore di
Icon il percorso dell'icona che desideriamo visualizzare sulla sinistra della voce del menu.
Dopo aver selezionato la nostra icona la facciamo disegnare dal sistema con l'istruzione della riga
3. a cui passiamo tre argomenti , il nostro oggetto icona e poi le posizioni che indicano da dove inziare a disegnare l'icona, all'interno del rettangolo a disposizione. Se volessimo spostare l'icona di 10 pixel verso sinistra basta scrivere
e.Bounds.X + 10 mentre se volessimo disegnarla più in basso
e.Bounds.Y + 10, è facile intuire che
e.Bounds.X e
e.Bounds.Y rappresentano le coordinate dell'angolo in alto a sinistra del rettangolo e quindi in teoria potremmo inserire valori a piacere?ma di sicuro il risultato sarebbe disastroso!
Sistemata la nostra icona, passiamo ora a scrivere la voce del menu e immaginiamo di voler inserire il menu
"File". Nella riga
4. creiamo un oggetto
Font e, grazie ai numerosi overload del costruttore, impostiamo tutte le possibili proprietà che si possono assegnare ad un tipo di font, in questo caso, ad esempio, solo
Bold (grassetto) ma in realtà possiamo decidere anche la dimensione, la sottolineatura, il corsivo o anche il tipo di carattere. Dopo aver creato l'oggetto
Font e averne impostato le proprietà desiderate bisogna dire al sistema come e dove disegnarlo, questo è quello che avviene nella riga
5. con il metodo
DrawString().
Come potete facilmente immaginare, anche questo metodo ha molti
overload, in base alle nostre esigenze.
In questo caso il primo argomento è la voce del menu, il secondo l'oggetto
Font da cui ereditare le proprietà, il terzo è il colore di visualizzazione e gli ultimi due sono le famose x e y, ovvero le coordinate per posizionare la scritta esattamente dove desideriamo, anche qui valgono le regole valide per la riga
3..
Infine, non ci resta che rilasciare le risorse utilizzate per l'oggetto
Icon e
Font che dopo aver stampato a video non servono più.
Alla fine il risultato dovrebbe essere più o meno questo:
Considerazioni finaliPer le altre voci del menù il discorso non cambia e rimane identico anche per i menu contestuali (
ContextMenu), fate attenzione alla dimensione delle icone e ricordate che sfruttando i costruttori di
DrawIcon, Font e DrawString potete realizzare menu molto fantasiosi ed attraenti poiché avete massima libertà di sviluppo.
Buon divertimento!
Il menù classico con Icone
Un esempio di menù contestuale con icone