Home Page Home Page Articoli Creare menù personalizzati con icone con .NET

Creare menù personalizzati con icone con .NET

Le applicazioni più evolute come Office sono state le prime a far uso di menù con le icone. Visual Studio .NET non ha un componente menù così evoluto, ed è necessario quindi implementarlo manualmente, vediamo come si può fare.
Autore: Stefano Passatordi Livello:
Menù, Icone e Visual Studio
Gli 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 Icone
Per 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 finali
Per 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
Il menù classico con Icone


Un esempio di menù contestuale con icone
Un esempio di menù contestuale con icone

Voto medio articolo: 3.7 Numero Voti: 15
Stefano Passatordi

Stefano Passatordi

Laureato in Tecnologie Informatiche presso l'Università di Pisa.Amante della programmazione in generale,ha iniziato da autodidatta con VB6 e poi tramite l'università e studi personali ha approfondito le sue conoscenze in vari ambiti del mondo della programmazione. Profilo completo

Articoli collegati

Come creare un DateTimePicker personalizzato (ExtDtp)
In questo Tutorial viene spiegato come è possibile creare un controllo personalizzato (Custom Control) con Visual Studio .NET. In particolare verrà creata una versione del DateTimePicker con funzionalità aggiuntive rispetto a quello classico offerto da Microsoft.
Autore: Gianpiero Carrozzo | Difficoltà: | Voto:
Costruzione di un controllo personalizzato (Windows Control)
In questo articolo trovate le istruzioni passo passo per poter costruire un oggetto/controllo personalizzato da poter utilizzare nelle vostre applicazioni windows.
Autore: David De Giacomi | Difficoltà: | Commenti: 2 | Voto:
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5