Condividi tramite

Procedura dettagliata: Creazione di un'interfaccia stile Esplora risorse con i controlli ListView e TreeView utilizzando il Designer

  • Articolo

Uno dei vantaggi di Visual Studio è la possibilità di creare applicazioni Windows Form dall'aspetto professionale in un breve periodo di tempo. Uno scenario comune è la creazione di un'interfaccia utente (UI) con controlli ListView e TreeView che si avvicinano alla funzionalità di 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. Nel menu File scegliere Nuovoe quindi fare clic su Progetto.

  2. Nella finestra di dialogo Nuovo progetto eseguire le operazioni seguenti:

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

    2. Nell'elenco dei modelli, scegliere applicazione Windows Forms.

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

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

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

  6. Aggiungere un controllo TreeView denominato treeview1 al form e posizionarlo sul lato sinistro del controllo SplitContainer. Nella 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 controllo ListView denominato listView1 al form e posizionarlo sul lato destro del controllo SplitContainer. Nella 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 (pulsante Puntini di sospensione (...) nella finestra Proprietà di Visual Studio.) nella proprietà Columns**.** Aggiungere tre colonne e impostare rispettivamente la proprietà Text su Name, Typee Last Modified. Fare clic su OK per chiudere la finestra di dialogo.

    4. Impostare la proprietà SmallImageList su imageList1.

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

    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 utilizza 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 di configurazione del passaggio precedente nel costruttore del modulo o nel metodo di gestione degli eventi Load. Aggiungere questo codice al costruttore del modulo.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. Gestire l'evento NodeMouseClick per treeview1, e implementare il codice per popolare listview1 con il contenuto di un nodo quando si fa clic su un nodo. Aggiungere questo codice alla classe Form1.

    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. Aggiungi 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 suddivisa in cui sul lato sinistro apparirà il controllo TreeView che mostra la directory del progetto, mentre sul lato destro ci sarà il controllo ListView con tre colonne. È possibile attraversare il TreeView selezionando i nodi della directory e il 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 controlli insieme. Per altre informazioni su questi controlli, vedere gli argomenti seguenti:

Vedere anche