Procedura dettagliata: creazione di un'interfaccia di tipo Esplora risorse con i controlli ListView e TreeView utilizzando la finestra di progettazione

Articolo
08/11/2011

Uno dei vantaggi di Visual Studio consiste nella capacità di creare rapidamente applicazioni Windows Form a livello professionale. Uno scenario comune consiste nella creazione di un'interfaccia utente (UI, User Interface) con i controlli ListView e TreeView simile alla funzionalità Esplora risorse dei sistemi operativi Windows. Esplora risorse consente di visualizzare la struttura gerarchica dei file e delle cartelle di un computer.

Nota

È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida a seconda delle impostazioni attive o dell'edizione del programma. Per modificare le impostazioni, scegliere Importa/Esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Gestione delle impostazioni.

Per creare il form contenente i controlli ListView e TreeView

Scegliere Nuovo dal menu File, quindi fare clic su Progetto.
Nella finestra di dialogo Nuovo progetto attenersi alla seguente procedura:
1. Nelle categorie scegliere Visual Basic o Visual C#.
2. Nell'elenco di modelli scegliere Applicazione Windows Form.
Scegliere OK. Verrà creato un nuovo progetto Windows Form.
Aggiungere un controllo SplitContainer nel form e impostare la proprietà Dock su Fill.
Aggiungere un oggetto ImageList denominato imageList1 nel form e utilizzare la finestra Proprietà per aggiungere due immagini, l'immagine di una cartella e l'immagine di un documento, in quest'ordine.
Aggiungere un controllo TreeView denominato treeview1 nel form e posizionarlo sul lato sinistro del controllo SplitContainer. Nella finestra Proprietà per treeView1 effettuare le operazioni seguenti:
1. Impostare la proprietà Dock su Fill.
2. Impostare la proprietà ImageList su imagelist1..
Aggiungere un controllo ListView denominato listView1 nel form e posizionarlo sul lato destro del controllo SplitContainer. Nella finestra Proprietà per listview1 effettuare le operazioni seguenti:
1. Impostare la proprietà Dock su Fill.
2. Impostare la proprietà View su Details.
3. Aprire l'editor dell'insieme ColumnHeader facendo clic sul pulsante con i puntini di sospensione () nella proprietà Columns. Aggiungere tre colonne e impostare la proprietà Text su Name, Type e Last Modified, rispettivamente. Scegliere OK per chiudere la finestra di dialogo.
4. Impostare la proprietà SmallImageList su imageList1..

Implementare il codice per inserire nodi principali e secondari in TreeView. Aggiungere questo codice alla classe Form1.

Private Sub PopulateTreeView() 
    Dim rootNode As TreeNode

    Dim info As New DirectoryInfo("../..")
    If info.Exists Then
        rootNode = New TreeNode(info.Name)
        rootNode.Tag = info
        GetDirectories(info.GetDirectories(), rootNode)
        treeView1.Nodes.Add(rootNode)
    End If

End Sub

Private Sub GetDirectories(ByVal subDirs() As DirectoryInfo, _
    ByVal nodeToAddTo As TreeNode)

    Dim aNode As TreeNode
    Dim subSubDirs() As DirectoryInfo
    Dim subDir As DirectoryInfo
    For Each subDir In subDirs
        aNode = New TreeNode(subDir.Name, 0, 0)
        aNode.Tag = subDir
        aNode.ImageKey = "folder"
        subSubDirs = subDir.GetDirectories()
        If subSubDirs.Length <> 0 Then
            GetDirectories(subSubDirs, aNode)
        End If
        nodeToAddTo.Nodes.Add(aNode)
    Next subDir

End Sub

        private void PopulateTreeView()
        {
            TreeNode rootNode;

            DirectoryInfo info = new DirectoryInfo(@"../..");
            if (info.Exists)
            {
                rootNode = new TreeNode(info.Name);
                rootNode.Tag = info;
                GetDirectories(info.GetDirectories(), rootNode);
                treeView1.Nodes.Add(rootNode);
            }
        }

        private void GetDirectories(DirectoryInfo[] subDirs, 
            TreeNode nodeToAddTo)
        {
            TreeNode aNode;
            DirectoryInfo[] subSubDirs;
            foreach (DirectoryInfo subDir in subDirs)
            {
                aNode = new TreeNode(subDir.Name, 0, 0);
                aNode.Tag = subDir;
                aNode.ImageKey = "folder";
                subSubDirs = subDir.GetDirectories();
                if (subSubDirs.Length != 0)
                {
                    GetDirectories(subSubDirs, aNode);
                }
                nodeToAddTo.Nodes.Add(aNode);
            }
        }

Poiché nel codice precedente viene utilizzato lo spazio dei nomi System.IO, aggiungere l'istruzione using o import appropriata nella parte superiore del form.
```
Imports System.IO
```
```
using System.IO;
```

Chiamare il metodo di configurazione del passaggio precedente nel costruttore del form o il metodo per la gestione dell'evento Load. Aggiungere questo codice al costruttore del form.

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

        public Form1()
        {
            InitializeComponent();
            PopulateTreeView();
        }

Gestire l'evento NodeMouseClick per treeview1 e implementare il codice per inserire inlistview1il contenuto di un nodo quando viene fatto clic su di esso. Aggiungere questo codice alla classe Form1.

Private Sub treeView1_NodeMouseClick(ByVal sender As Object, _
    ByVal e As TreeNodeMouseClickEventArgs) _
        Handles treeView1.NodeMouseClick

    Dim newSelected As TreeNode = e.Node
    listView1.Items.Clear()
    Dim nodeDirInfo As DirectoryInfo = _
    CType(newSelected.Tag, DirectoryInfo)
    Dim subItems() As ListViewItem.ListViewSubItem
    Dim item As ListViewItem = Nothing

    Dim dir As DirectoryInfo
    For Each dir In nodeDirInfo.GetDirectories()
        item = New ListViewItem(dir.Name, 0)
        subItems = New ListViewItem.ListViewSubItem() _
            {New ListViewItem.ListViewSubItem(item, "Directory"), _
            New ListViewItem.ListViewSubItem(item, _
            dir.LastAccessTime.ToShortDateString())}

        item.SubItems.AddRange(subItems)
        listView1.Items.Add(item)
    Next dir
    Dim file As FileInfo
    For Each file In nodeDirInfo.GetFiles()
        item = New ListViewItem(file.Name, 1)
        subItems = New ListViewItem.ListViewSubItem() _
            {New ListViewItem.ListViewSubItem(item, "File"), _
            New ListViewItem.ListViewSubItem(item, _
            file.LastAccessTime.ToShortDateString())}

        item.SubItems.AddRange(subItems)
        listView1.Items.Add(item)
    Next file

    listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize)

End Sub

        void treeView1_NodeMouseClick(object sender,
            TreeNodeMouseClickEventArgs e) 
        {
            TreeNode newSelected = e.Node;
            listView1.Items.Clear();
            DirectoryInfo nodeDirInfo = (DirectoryInfo)newSelected.Tag;
            ListViewItem.ListViewSubItem[] subItems;
            ListViewItem item = null;

            foreach (DirectoryInfo dir in nodeDirInfo.GetDirectories())
            {
                item = new ListViewItem(dir.Name, 0);
                subItems = new ListViewItem.ListViewSubItem[]
                    {new ListViewItem.ListViewSubItem(item, "Directory"), 
                     new ListViewItem.ListViewSubItem(item, 
                        dir.LastAccessTime.ToShortDateString())};
                item.SubItems.AddRange(subItems);
                listView1.Items.Add(item);
            }
            foreach (FileInfo file in nodeDirInfo.GetFiles())
            {
                item = new ListViewItem(file.Name, 1);
                subItems = new ListViewItem.ListViewSubItem[]
                    { new ListViewItem.ListViewSubItem(item, "File"), 
                     new ListViewItem.ListViewSubItem(item, 
                        file.LastAccessTime.ToShortDateString())};

                item.SubItems.AddRange(subItems);
                listView1.Items.Add(item);
            }

            listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize);
        }

Se si utilizza C#, assicurarsi che l'evento NodeMouseClick sia associato al relativo metodo di gestione degli eventi. Aggiungere questo codice al costruttore del form.

            this.treeView1.NodeMouseClick += 
                new TreeNodeMouseClickEventHandler(this.treeView1_NodeMouseClick);

Verifica dell'applicazione

È ora possibile verificare il form per assicurarsi che funzioni correttamente.

Per eseguire il test del form

Premere F5 per eseguire l'applicazione.

Verrà visualizzato un form suddiviso contenente un controllo TreeView che visualizza la directory di progetto nel lato sinistro e un controllo ListView nel lato destro con tre colonne. È possibile scorrere TreeView selezionando i nodi di directory. In ListView viene inserito il contenuto della directory selezionata.

Passaggi successivi

L'applicazione fornisce un esempio di come si possono utilizzare insieme i controlli TreeView e ListView. Per ulteriori informazioni sui controlli, vedere gli argomenti seguenti:

Vedere anche

Condividi tramite

Procedura dettagliata: creazione di un'interfaccia di tipo Esplora risorse con i controlli ListView e TreeView utilizzando la finestra di progettazione

Per creare il form contenente i controlli ListView e TreeView

Verifica dell'applicazione

Per eseguire il test del form

Passaggi successivi

Vedere anche

Attività

Riferimenti

Altre risorse

Risorse aggiuntive