Condividi tramite


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

Uno dei vantaggi di Visual Studio è la possibilità di creare applicazioni di Windows Form dall'aspetto professionale in un breve periodo di tempo. Uno scenario comune è la creazione di un'interfaccia utente con ListView controlli e TreeView simili alla funzionalità Esplora risorse dei sistemi operativi Windows. Esplora risorse visualizza una struttura gerarchica dei file e delle cartelle nel computer di un utente.

Per creare il modulo contenente un controllo ListView e TreeView

  1. Scegliere Nuovo dal menu Filee quindi fare clic su Progetto.

  2. Nella finestra di dialogo New Project (Nuovo progetto) seguire questa procedura:

    1. Nelle categorie scegliere Visual Basic o Visual C#.

    2. Nell'elenco dei modelli scegliere Windows Form'applicazione.

  3. Fare clic su OK. Viene creato un nuovo progetto Windows Form.

  4. Aggiungere un SplitContainer controllo al form e impostarne la Dock proprietà su Fill.

  5. Aggiungere un ImageList oggetto denominato imageList1 al modulo e usare il Finestra Proprietà per aggiungere due immagini: un'immagine di cartella e un'immagine del documento, in tale ordine.

  6. Aggiungere un TreeView controllo denominato treeview1 al form e posizionarlo sul lato sinistro del SplitContainer controllo. Nel Finestra Proprietà per treeView1 eseguire le operazioni seguenti:

    1. Impostare la proprietà Dock su Fill.

    2. Impostare la proprietà ImageList su imagelist1.

  7. Aggiungere un ListView controllo denominato listView1 al form e posizionarlo sul lato destro del SplitContainer controllo. Nel Finestra Proprietà per listview1 eseguire le operazioni seguenti:

    1. Impostare la proprietà Dock su Fill.

    2. Impostare la proprietà View su Details.

    3. Aprire l'Editor raccolta ColumnHeader facendo clic sui puntini di sospensione (The Ellipsis button (...) in the Properties window of Visual Studio.) nella Columns proprietà**.** Aggiungere tre colonne e impostarne Text la proprietà rispettivamente su Name, Typee Last Modified. Scegliere OK per chiudere la finestra di dialogo.

    4. Impostare la proprietà SmallImageList su imageList1.

  8. Implementare il codice per popolare con TreeView nodi e sottonodi. Aggiungere questo codice alla Form1 classe .

    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);
        }
    }
    
    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
    
    
  9. Poiché il codice precedente usa lo spazio dei nomi System.IO, aggiungere l'istruzione using o import appropriata nella parte superiore del modulo.

    using System.IO;
    
    Imports System.IO
    
  10. Chiamare il metodo set-up del passaggio precedente nel costruttore o Load nel metodo di gestione degli eventi del modulo. Aggiungere questo codice al costruttore del modulo.

    public Form1()
    {
        InitializeComponent();
        PopulateTreeView();
    }
    
    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub
    
    
  11. Gestire l'evento NodeMouseClick pertreeview1e implementare listview1 il codice da popolare con il contenuto di un nodo quando si fa clic su un nodo. Aggiungere questo codice alla Form1 classe .

    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);
    }
    
    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
    
    

    Se si usa C#, assicurarsi di avere l'evento NodeMouseClick associato al relativo metodo di gestione degli eventi. Aggiungere questo codice al costruttore del modulo.

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

Test dell'applicazione

È ora possibile testare il modulo per assicurarsi che si comporti come previsto.

Per testare il modulo

  • Premere F5 per eseguire l'applicazione.

    Verrà visualizzata una maschera divisa contenente un TreeView controllo che visualizza la directory del progetto a sinistra e un ListView controllo a destra con tre colonne. È possibile attraversare l'oggetto TreeView selezionando i nodi della directory e l'oggetto ListView viene popolato con il contenuto della directory selezionata.

Passaggi successivi

Questa applicazione offre un esempio di modo in cui è possibile usare TreeView e ListView i controlli insieme. Per altre informazioni su questi controlli, vedere gli argomenti seguenti:

Vedi anche