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

  • Articolo

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