Personalizzazione dell'aspetto del controllo server Web TreeView
Aggiornamento: novembre 2007
Il rendering del controllo TreeView è completamente personalizzabile e può quindi essere definito con un'ampia gamma di stili di visualizzazione.
Per personalizzare l'aspetto del controllo TreeView, è possibile effettuare le seguenti operazioni:
Specificare le proprietà del controllo TreeView che influiscono sulla visualizzazione e il rendering del controllo.
Specificare una proprietà ImageSet per la selezione di un insieme di immagini predefinite di cui eseguire il rendering insieme al controllo in fase di esecuzione.
Specificare singole proprietà di stile e di immagine che definiscano le caratteristiche di visualizzazione e rendering di specifici gruppi di oggetti TreeNode all'interno del controllo TreeView.
Utilizzare la funzionalità Formattazione automatica di Visual Studio per personalizzare un insieme di proprietà di stile e di immagine contemporaneamente.
Assegnare un'interfaccia o un tema predefinito che definisca le caratteristiche di visualizzazione e rendering in fase di esecuzione per i controlli TreeView in un'applicazione.
Proprietà di layout di primo livello
Oltre alle proprietà standard dei controlli server, ad esempio la proprietà BackColor, nel controllo TreeView è esposto un insieme di proprietà che consente di specificare dettagliatamente l'aspetto del controllo TreeView.
Proprietà NodeIndent
La proprietà NodeIndent specifica il livello di rientro per tutti i nodi. I nodi sono rientrati dal lato su cui è eseguito il rendering del controllo TreeView, ovvero dal lato sinistro, se in base alle impostazioni internazionali il rendering è eseguito da sinistra a destra, e dal lato destro, se in base alle impostazioni internazionali il rendering è eseguito da destra a sinistra.
Proprietà NodeWrap
La proprietà NodeWrap indica se il testo visualizzato in ogni nodo va a capo o continua sulla stessa riga quando lo spazio è insufficiente.
Proprietà ShowLines
La proprietà ShowLines indica se deve essere visualizzata la linea di collegamento tra i nodi figlio e i nodi genitore. Quando questa proprietà è impostata su true, il controllo TreeView cerca la cartella accessibile al Web specificata dalla proprietà LineImagesFolder per le immagini di linee.
Proprietà TreeNodeStyle
Oltre alle proprietà standard, il controllo TreeView supporta anche le proprietà del controllo TreeNodeStyle per ogni tipo di nodo. Queste proprietà di stile eseguono l'override della proprietà NodeStyle, che si applica a tutti i tipi di nodo.
Nel controllo TreeView è inoltre disponibile una proprietà NodeIndent che specifica il livello di rientro per tutti i nodi. I nodi sono rientrati dal lato su cui è eseguito il rendering del controllo TreeView, ovvero dal lato sinistro, se in base alle impostazioni internazionali il rendering è eseguito da sinistra a destra, e dal lato destro, se in base alle impostazioni internazionali il rendering è eseguito da destra a sinistra.
È possibile specificare che al nodo venga applicato un determinato stile quando è selezionato e un altro stile quando il puntatore si posiziona su di esso. Se la proprietà Selected del nodo è impostata su true, viene applicata la proprietà SelectedNodeStyle, che esegue l'override di tutte le proprietà non specificate per il nodo selezionato. Al passaggio del puntatore sopra un nodo, viene applicata la proprietà HoverNodeStyle. Nell'immagine e nella tabella seguenti vengono descritte le proprietà TreeNodeStyle.
Proprietà TreeNodeStyle
.gif)
Proprietà di nodo |
Descrizione |
|---|---|
Specifica la spaziatura verticale tra l'intero nodo corrente e i nodi adiacenti superiori e inferiori. |
|
Specifica lo spazio da visualizzare sui lati superiore e inferiore del testo TreeNode. |
|
Specifica lo spazio da visualizzare sui lati sinistro e destro del testo TreeNode. |
|
Specifica lo spazio da visualizzare sopra e sotto i nodi figlio di TreeNode. |
|
Specifica il percorso dell'immagine da visualizzare accanto a TreeNode. |
Insieme degli stili di livello
L'insieme LevelStyles rappresenta un'alternativa all'impostazione di singole proprietà di stile, ad esempio la proprietà NodeStyle. L'insieme LevelStyles consente di controllare lo stile dei nodi in specifici livelli della struttura. Il primo stile dell'insieme corrisponde allo stile dei nodi presenti nel primo livello della struttura, il secondo allo stile dei nodi presenti nel secondo livello della struttura e così via. Questa proprietà è solitamente utilizzata per generare menu di spostamento standard per sommari, in cui i nodi di un determinato livello devono avere lo stesso aspetto, a prescindere da eventuali nodi figlio.
.gif "Nota") Nota: |
|---|
Se lo stile per un determinato livello viene definito tramite l'insieme LevelStyles, le impostazioni di stile dei nodi principali, padre e foglia in quel livello verranno sostituite. |
Precedenze negli stili
Le proprietà di stile sono applicate in base al seguente ordine di precedenza:
RootNodeStyle, ParentNodeStyle o LeafNodeStyle, a seconda del tipo di nodo. Se l'insieme LevelStyles è definito, viene applicato in questo momento, eseguendo l'override delle altre proprietà di stile del nodo.
Formattazione automatica
Se è utilizzato uno strumento di progettazione visiva, ad esempio Visual Web Developer, nel controllo TreeView sarà disponibile la funzionalità Formattazione automatica, che consente di applicare al controllo un insieme di proprietà di visualizzazione in fase di progettazione. Le impostazioni di queste proprietà eseguono l'override di tutti i valori delle proprietà impostati precedentemente e possono essere modificate durante la progettazione del codice.
Oltre agli attributi di stile standard, la funzionalità Formattazione automatica imposta la proprietà ImageSet in modo che corrisponda a uno degli insiemi di immagini disponibili inclusi con il controllo TreeView. Avvalendosi di questa funzionalità, è possibile modificare rapidamente l'aspetto del controllo TreeView in modo che riproduca altre strutture personalizzate note, quali:
Cartella Posta in arrivo di Outlook
File system di Microsoft Windows
Elenco contatti di MSN Messenger
Elenco newsgroup di Outlook Express
Sommario di MSDN
Sommario della Guida in linea di Windows
Domande frequenti (FAQ, Frequently asked questions)
Visualizzazione dell'elenco degli eventi di Windows
Oltre agli stili per le strutture comuni, nella funzionalità Formattazione automatica sono disponibili anche numerosi stili per gli elenchi puntati.
La funzionalità Formattazione automatica consente di applicare un insieme di proprietà a un singolo controllo. Per applicare lo stesso aspetto a più controlli TreeView all'interno del sito Web, è possibile utilizzare temi e interfacce. Per ulteriori informazioni, vedere Cenni preliminari su temi e interfacce ASP.NET.
Proprietà di immagine
Diversamente dalla maggior parte dei controlli, TreeView supporta l'applicazione di un insieme di risorse grafiche. Le immagini sono utilizzate per rappresentare pulsanti di espansione e compressione, nodi e linee di connessione.
È possibile impostare le immagini al livello TreeView specificando la proprietà ImageSet oppure creando immagini personalizzate e impostando le proprietà delle singole immagini. È inoltre possibile impostare le immagini al livello TreeNode per un'ulteriore personalizzazione dell'aspetto del controllo TreeView.
Insiemi di immagini
Nel controllo TreeView sono inclusi insiemi predefiniti di risorse grafiche che corrispondono alle immagini utilizzate nelle strutture più comuni. Nella tabella riportata di seguito vengono mostrati alcuni degli insiemi di immagini più comuni che è possibile utilizzare.
Nome dell'insieme di immagini |
Descrizione |
|---|---|
TreeViewImageSet.Contacts |
Immagini di MSN Messenger |
TreeViewImageSet.Faq |
Immagini per FAQ |
TreeViewImageSet.Inbox |
Immagini della cartella Posta in arrivo di Outlook |
TreeViewImageSet.News |
Immagini per i newsgroup di Outlook Express |
TreeViewImageSet.Help |
Immagini del sistema della Guida in linea di Microsoft Windows |
TreeViewImageSet.XPFileExplorer |
Immagini di Esplora file di Microsoft Windows XP |
Linee e immagini personalizzate
Oltre ad avvalersi di immagini predefinite, è possibile definire insiemi personalizzati di risorse grafiche per il controllo TreeView. Per utilizzare un insieme di immagini personalizzato, è necessario creare due tipi di immagine. Le prime sono immagini per nodi che mostrano un nodo espandibile, un nodo comprimibile e un nodo che non viene espanso né compresso. Queste immagini possono essere realizzate in un programma quale Microsoft Paint. Se si utilizzano linee di connessione tra i nodi, è necessario creare un insieme di immagini di linee e impostare la proprietà ShowLines su true. Quando si utilizza uno strumento di progettazione visiva quale Visual Web Developer, è possibile creare immagini di linee con lo strumento appositamente fornito. In caso contrario, le immagini di linee dovranno essere create manualmente utilizzando un programma quale Microsoft Paint.
Una volta create le immagini dei nodi, memorizzarle in una directory del sito Web, quindi impostare le proprietà indicate di seguito sul controllo TreeView per fare riferimento alle immagini:
È inoltre necessario memorizzare le immagini di linee in una cartella e quindi impostare la proprietà LineImagesFolder in modo che punti alla cartella contenente tali immagini.
Per ulteriori informazioni sulla proprietà ImageSet e un elenco completo degli insiemi di immagini disponibili, vedere ImageSet.
Per ulteriori informazioni sulle immagini di linee e un elenco di tutte le immagini per il controllo TreeView, vedere LineImagesFolder.
Temi e interfacce
I temi e le interfacce consentono di applicare con facilità un insieme di proprietà a più controlli presenti in un sito Web. Creando ad esempio un tema denominato MyTheme e definendo un'interfaccia all'interno del tema denominata MyTreeView, sarà possibile applicare l'interfaccia a più controlli TreeView dopo averla definita una sola volta.
Per ulteriori informazioni, vedere Cenni preliminari su temi e interfacce ASP.NET.