Utilizzo di immagini con il controllo Menu
Aggiornamento: novembre 2007
È possibile utilizzare immagini per indicare voci di menu figlio aggiuntive disponibili quando il puntatore del mouse è posizionato su una voce di menu. È inoltre possibile utilizzare immagini per separare voci di menu statici o dinamici o per impostarle come sfondo per l'intero menu o per un livello di voci di menu.
È possibile specificare le immagini da utilizzare e la modalità di visualizzazione delle immagini mediante fogli di stile CSS e le proprietà del controllo Menu.
Utilizzo delle immagini popout predefinite
È possibile utilizzare una delle due proprietà, o entrambe, per definire le immagini che indicano voci di menu figlio non visualizzate la prima volta che si esegue il rendering del controllo Menu. Per utilizzare l'immagine predefinita per indicare che una voce di menu statico ha voci figlio, impostare la proprietà StaticEnableDefaultPopOutImage su true; per utilizzare l'immagine predefinita per una voce di menu dinamico con voci figlio, impostare la proprietà DynamicEnableDefaultPopOutImage su true. Impostando il valore su false per una di queste proprietà, o per entrambe, viene nascosta l'immagine della freccia nera predefinita per ogni voce di menu con voci figlio.
Nell'esempio seguente entrambi i valori vengono impostati su true in modo che per tutte le voci di menu statici o dinamici che hanno voci figlio venga visualizzata l'immagine della freccia nera predefinita.
<asp:Menu ID="Menu1"
StaticEnableDefaultPopOutImage="true"
DynamicEnableDefaultPopOutImage="true">
Specifica di icone degli indicatori personalizzate
Per utilizzare immagini personalizzate create per le icone degli indicatori, assegnare valori alle proprietà StaticPopOutImageUrl e DynamicPopOutImageUrl. Ogni proprietà specifica il nome e il percorso di un file che indicano l'immagine da utilizzare. La proprietà StaticPopOutImageUrl definisce l'immagine da utilizzare per le voci di menu statici, mentre la proprietà DynamicPopOutImageUrl definisce l'immagine da utilizzare per le voci di menu dinamici.
Nell'esempio seguente le icone degli indicatori statici e dinamici vengono impostate sull'immagine Greenarrow.gif memorizzata nella directory Immagini.
<asp:Menu ID="Menu1" Runat="server"
StaticPopOutImageUrl="~/images/greenarrow.gif"
DynamicPopOutImageUrl="~/images/greenarrow.gif">
Specifica delle immagini dei separatori
Le voci di menu allo stesso livello possono essere separate l'una dall'altra tramite immagini dei separatori. È possibile specificare immagini dei separatori da visualizzare sopra e sotto le voci di menu di un determinato livello oppure per tutti i livelli di un menu statico o dinamico. Per specificare le immagini dei separatori vengono utilizzate quattro proprietà, due per i separatori superiore e inferiore delle voci di menu statici e due per i separatori superiore e inferiore delle voci di menu dinamici:
Nell'esempio seguente viene specificato che l'immagine Greenseparator.gif venga visualizzata sotto ogni voce di menu statico.
<asp:Menu ID="Menu2" Runat="server"
StaticBottomSeparatorImageUrl="~/greenseparator.gif">
Specifica di immagini di scorrimento
Se si specificano numerose voci di menu, la finestra popup utilizzata per visualizzare voci di menu dinamici potrebbe non espandersi a sufficienza per visualizzare tutte le voci di menu. Il controllo Menu crea automaticamente barre di scorrimento per consentire agli utenti di scorrere l'elenco delle voci di menu ed è possibile utilizzare le proprietà ScrollDownImageUrl e ScrollUpImageUrl per assegnare frecce personalizzate o altre immagini alle icone di direzione verso l'alto e verso il basso della barra di scorrimento.
Nell'esempio seguente viene illustrato come utilizzare queste due proprietà per specificare immagini personalizzate per le frecce della barra di scorrimento.
<asp:Menu ID="Menu1" Runat="server"
ScrollUpImageUrl="~/images/greenuparrow.gif"
ScrollDownImageUrl="~/images/greenuparrow.gif"
Specifica delle dimensioni delle immagini nei fogli di stile CSS
Il modo in cui si utilizzano le immagini influisce notevolmente su come queste vengono visualizzate con un controllo Menu. Ad esempio, se la prima volta che si visualizza una pagina le immagini utilizzate nel controllo Menu non sono ancora state memorizzate nella cache dal browser, si potrebbe verificare uno sfarfallio o "salti" nelle immagini finché il browser non ne determina le dimensioni. Specificando le dimensioni delle immagini utilizzate nel controllo Menu in un foglio di stile CSS, è possibile evitare il verificarsi di questi fenomeni.
Se si utilizza un'immagine con una voce di menu, assegnare innanzitutto un nome di classe alla proprietà WebControl.CssClass della voce di menu utilizzando l'immagine nel tag HTML. Nel foglio di stile CSS indicare quindi le dimensioni dell'immagine. Nell'esempio seguente il nome di classe "menuitem" viene assegnato alle proprietà StaticMenuItemStyle e DynamicMenuItemStyle.
<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />
Nel file CSS a cui viene fatto riferimento nella pagina che contiene il menu è necessario impostare il riferimento alla classe CSS della voce di menu e quindi le dimensioni dell'immagine.
Nell'esempio seguente viene fatto riferimento alla classe CSS "menuitem" e specificato che un'immagine di 40 x 40 pixel viene utilizzata per indicare che una voce di menu ha voci figlio.
.menuitem {} /*Style code for each menu item goes here. */
.menuitem img
{
width: 40px;
height: 40px;
}
Vedere anche
Attività
Procedura dettagliata: visualizzazione di un menu in pagine Web
Procedura dettagliata: controllo del menu a livello di codice di ASP.NET
Concetti
Controlli server Web ASP.NET e stili CSS
Cenni preliminari sul controllo Menu