Utilizzo di immagini con il controllo TreeView

Articolo
10/22/2014

Aggiornamento: novembre 2007

Il controllo TreeView può assumere diversi aspetti, fornendo così la personalizzazione flessibile delle immagini nonché proprietà che specificano opzioni dell'interfaccia utente personalizzate. È possibile utilizzare immagini con il controllo TreeView per rappresentare nodi, linee di connessione ed espandere e comprimere icone. È inoltre possibile utilizzare un insieme predefinito di immagini dalla proprietà ImageSet o utilizzare immagini personalizzate impostando singole proprietà dell'immagine.

Immagini utilizzate nel controllo TreeView

Tra gli elementi visivi di un controllo TreeView sono inclusi i seguenti:

Immagini di nodi compressi
Immagini di nodi espansi
Immagini non espandibili
Immagini del nodo principale
Immagini del nodo padre
Immagini dei nodi foglia

Oltre a queste immagini, il controllo TreeView utilizza anche immagini per creare linee che collegano gli elementi TreeView quando la proprietà ShowLines è impostata su true. È possibile generare queste linee utilizzando la finestra di dialogo Generatore immagini linea disponibile nel controllo TreeView (quando la proprietà Mostra righe è selezionata) oppure creare le immagini personalmente. Si noti che non è necessario personalizzare ogni proprietà dell'immagine. Se una proprietà dell'immagine non è impostata in modo esplicito, viene utilizzata l'immagine predefinita incorporata.

Utilizzo delle immagini predefinite in un insieme di immagini

Il modo più semplice di assegnare immagini a un controllo TreeView consiste nell'utilizzare la proprietà ImageSet. L'insieme di immagini incorporato nel controllo TreeView include insiemi di risorse grafiche comuni nelle strutture utilizzate con MSN Messenger, Microsoft Outlook, Esplora risorse e la Guida in linea di Microsoft Windows. Negli insiemi sono inclusi inoltre diversi stili per gli elenchi puntati.

Nell'esempio di codice seguente viene illustrato un controllo TreeView che utilizza l'insieme di immagini per l'esplorazione di file di Windows XP.

        <asp:TreeView ID="TreeView1" 
         
        DataSourceID="XmlDataSource1" 
        ImageSet= "XPFileExplorer">

Per un elenco completo e una descrizione degli insiemi di immagini disponibili per il controllo TreeView, vedere la proprietà ImageSet.

Utilizzo di immagini personalizzate per espansione e compressione

È possibile utilizzare immagini per indicare un nodo espandibile, un nodo comprimibile o un nodo che non si espande né si comprime. È possibile creare immagini a questo scopo nella maggior parte dei programmi grafici.

Per assegnare un'immagine a un determinato tipo di nodo, assegnare il percorso del file di immagine da utilizzare alla proprietà corrispondente. Tali proprietà includono ExpandImageUrl, CollapseImageUrl e NoExpandImageUrl. Nell'esempio seguente queste proprietà vengono impostate su immagini personalizzate nella directory delle immagini del sito Web.

    <asp:TreeView ID="TreeView1" 
         
        DataSourceID="XmlDataSource1"
            ExpandImageUrl="~/Images/ExpandAll.gif"
            CollapseImageUrl="~/Images/CollapseAll.gif"
            NoExpandImageUrl="~/Images/stop.gif">
    </asp:TreeView>

Si noti che è possibile disattivare il rendering delle immagini di espansione e compressione impostando la proprietà ShowExpandCollapse su false.

Utilizzo di immagini personalizzate per i nodi principali, padre e foglia

Ogni controllo TreeView può essere costituito da nodi principali, padre e foglia. Un nodo principale è un nodo con nodi figlio e con la proprietà Parent impostata su null; si tratta del nodo di livello superiore nella struttura. Un nodo padre è un nodo dell'insieme di nodi del TreeView con nodi figlio sottostanti nella gerarchia. Un nodo foglia è un nodo dell'insieme di nodi del controllo TreeView senza nodi figlio; non si tratta né di un nodo principale né di un nodo padre.

Il controllo TreeView espone gli stili delle proprietà per i tre tipi TreeNode: nodi principali, padre e foglia. Si tratta delle proprietà RootNodeStyle, ParentNodeStyle e LeafNodeStyle, rispettivamente. Ogni proprietà può essere utilizzata per definire un valore ImageUrl per una proprietà applicata a tale tipo di nodo. Queste immagini sono posizionate a sinistra del testo del nodo. Ogni tipo TreeNode può eseguire l'override in modo selettivo dell'immagine predefinita per il nodo del tipo corrispondente utilizzando la proprietà ImageUrl.

Nell'esempio riportato di seguito viene illustrato come assegnare proprietà.

<asp:TreeView ID="TreeView1"  DataSourceID="XmlDataSource1" >
        <RootNodeStyle ImageUrl="~/Images/root.gif" />
        <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
        <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
    </asp:TreeView>

Nell'esempio seguente viene illustrato come eseguire l'override dell'immagine dello stile del nodo specificata per un singolo nodo della struttura. Si noti che dopo il rendering accanto al nodo della struttura "Page 2" ci sarà un'immagine di stella (Star.gif) invece dell'immagine assegnata utilizzando la proprietà LeafNodeStyle.

      <asp:TreeView id="SampleTreeView" 
        >
          <RootNodeStyle ImageUrl="~/Images/root.gif" />
          <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
          <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
        <Nodes>
          <asp:TreeNode Value="Home" 
            Text="Home"
            Target="Content" 
            Expanded="True">
            <asp:TreeNode Value="Page 1" 
              Text="Page1"
              Target="Content">
              <asp:TreeNode Value="Section 1" 
                Text="Section 1"
                Target="Content"/>
            </asp:TreeNode>              
            <asp:TreeNode Value="Page 2" 
              Text="Page 2"
              Target="Content"
                ImageUrl="~/Images/star.gif">
            </asp:TreeNode> 
          </asp:TreeNode>
        </Nodes>
      </asp:TreeView>

Utilizzo di immagini linea

Il controllo TreeView può eseguire il rendering delle linee che collegano i nodi della struttura con una serie di immagini già sottoposte a rendering. Il controllo esegue il rendering di queste linee quando la proprietà ShowLines è impostata su true. È possibile modificare l'aspetto di queste immagini linea utilizzando il Generatore immagini linea nel menu di scelta rapida del controllo TreeView oppure assegnare immagini personalizzate a ognuna di queste funzionalità linea.

Nota:
Negli strumenti di progettazione visiva quale Visual Studio 2005 sono spesso incluse utilità per la generazione automatica di immagini linea.

Il controllo TreeView utilizza una convenzione di denominazione specifica per le 16 diverse immagini che costituiscono le linee utilizzate per la connessione dei nodi della struttura. Nella tabella riportata di seguito sono indicati il nome del file e la descrizione di ogni immagine utilizzata per le connessioni linea.

Nome file	Immagine	Descrizione
Dash.gif		Un'immagine linea visualizzata accanto al nodo principale quando c'è un solo nodo principale nella struttura ad albero e tale nodo è un nodo foglia.
Dashminus.gif		Un'immagine di segno meno (-) visualizzata accanto al nodo principale quando c'è un solo nodo principale nella struttura ad albero per indicare che tale nodo è espanso.
Dashplus.gif		Un'immagine di segno più (+) visualizzata accanto al nodo principale quando c'è un solo nodo principale nella struttura ad albero per indicare che tale nodo è compresso.
I.gif		Un'immagine linea visualizzata per collegare nodi adiacenti.
L.gif		Un'immagine linea visualizzata accanto all'ultimo nodo in un ramo quando il nodo è un nodo foglia.
Lminus.gif		Un'immagine linea visualizzata accanto all'ultimo nodo in un ramo per indicare che tale nodo è espanso.
Lplus.gif		Un'immagine linea visualizzata accanto all'ultimo nodo in un ramo per indicare che tale nodo è compresso.
Minus.gif		Un'immagine di segno menu visualizzata accanto al primo nodo principale in una struttura ad albero che contiene più nodi principali per indicare che tale nodo è espanso. Questa immagine non contiene una linea aggiuntiva ed è visualizzata solo dopo che il nodo principale è stato compresso una volta. La prima volta che viene caricata la pagina, viene visualizzata l'immagine Rminus.gif.
Noexpand.gif		Un'immagine spaziatore vuota visualizzata accanto a un nodo foglia. Questa immagine consente l'allineamento verticale del testo.
Plus.gif		Un'immagine di segno più visualizzata accanto al primo nodo principale in una struttura ad albero che contiene più nodi principali per indicare che tale nodo è compresso. Questa immagine non contiene una linea aggiuntiva ed è visualizzata solo dopo che il nodo principale è stato espanso una volta. La prima volta che viene caricata la pagina, viene visualizzata l'immagine Rplus.gif.
R.gif		Un'immagine linea visualizzata accanto al primo nodo principale in una struttura ad albero che contiene più nodi principali per indicare che tale nodo è un nodo foglia.
Rminus.gif		Un'immagine di segno menu visualizzata accanto al primo nodo principale in una struttura ad albero che contiene più nodi principali per indicare che tale nodo è espanso. Questa immagine contiene una linea aggiuntiva ed è visualizza solo la prima volta che si carica la pagina. Dopo che il nodo principale è stato compresso una volta, viene visualizzata l'immagine Minus.gif.
Rplus.gif		Un'immagine di segno più visualizzata accanto al primo nodo principale in una struttura ad albero che contiene più nodi principali per indicare che tale nodo è compresso. Questa immagine contiene una linea aggiuntiva ed è visualizza solo la prima volta che si carica la pagina. Dopo che il nodo principale è stato espanso una volta, viene visualizzata l'immagine Plus.gif.
T.gif		Un'immagine linea visualizzata accanto a un nodo nel centro della struttura ad albero (in corrispondenza di un'intersezione a T) per indicare che tale nodo è un nodo foglia.
Tminus.gif		Un'immagine di segno meno visualizzata accanto a un nodo nel centro della struttura ad albero (in corrispondenza di un'intersezione a T) per indicare che tale nodo è espanso.
Tplus.gif		Un'immagine di segno più visualizzata accanto a un nodo nel centro della struttura ad albero (in corrispondenza di un'intersezione a T) per indicare che tale nodo è compresso.

Quando si utilizza il Generatore immagini linea, il controllo crea le immagini e le archivia in una cartella predefinita denominata TreeLineImages. È possibile modificare il nome di questa cartella, nonché modificare le immagini generate dal Generatore immagini linea. Se si creano immagini personalizzate, assegnare loro un nome utilizzando le convenzioni di denominazione illustrate nella tabella riportata sopra. Il Generatore immagini linea semplifica le operazioni necessarie per creare immagini che è possibile modificare e personalizzare.