Dela via

Genomgång: Skapa ett explorer-formatgränssnitt med kontrollerna ListView och TreeView med hjälp av designern

En av fördelarna med Visual Studio är möjligheten att skapa professionella Windows Forms-program på kort tid. Ett vanligt scenario är att skapa ett användargränssnitt (UI) med ListView och TreeView kontroller som liknar Windows Explorer-funktionen i Windows-operativsystem. Utforskaren visar en hierarkisk struktur för filer och mappar på en användares dator.

Skapa formuläret som innehåller en ListView- och TreeView-kontroll

  1. Peka på Nytt på Arkiv-menyn och klicka sedan på Projekt.

  2. Gör följande i dialogrutan Nytt projekt:

    1. I kategorierna väljer du antingen Visual Basic eller Visual C#.

    2. I listan med mallar väljer du Windows Forms Application.

  3. Klicka på OK. Ett nytt Windows Forms-projekt skapas.

  4. Lägg till en SplitContainer-kontroll i formuläret och ställ in dess Dock-egenskap till Fill.

  5. Lägg till en ImageList med namnet imageList1 i formuläret och använd fönstret Egenskaper för att lägga till två bilder: en mappbild och en dokumentbild i den ordningen.

  6. Lägg till en TreeView kontroll med namnet treeview1 i formuläret och placera den på vänster sida av SplitContainer-kontrollen. I fönstret Egenskaper för treeView1 göra följande:

    1. Ange egenskapen Dock till Fill.

    2. Ange egenskapen ImageList till imagelist1.

  7. Lägg till en ListView kontroll med namnet listView1 i formuläret och placera den på höger sida av SplitContainer-kontrollen. I fönstret Egenskaper för listview1 göra följande:

    1. Ange egenskapen Dock till Fill.

    2. Ange egenskapen View till Details.

    3. Öppna columnheader-samlingsredigeraren genom att klicka på ellipserna (knappen Ellips (...) i fönstret Egenskaper i Visual Studio.) i egenskapen Columns**.** Lägg till tre kolumner och ange egenskapen Text till Name, Typerespektive Last Modified. Klicka på OK för att stänga dialogrutan.

    4. Ange egenskapen SmallImageList till imageList1.

  8. Implementera koden för att fylla i TreeView med noder och undernoder. Lägg till den här koden i klassen 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. Eftersom den föregående koden använder System.IO namnområde lägger du till lämplig användnings- eller importuttryck överst i formuläret.

    using System.IO;

    Imports System.IO

  10. Anropa konfigurationsmetoden från föregående steg i formulärets konstruktor eller Load händelsehanteringsmetod. Lägg till den här koden i formulärkonstruktorn.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. Hantera NodeMouseClick-händelsen för treeview1, och implementera koden för att fylla i listview1 med en nods innehåll när en nod klickas. Lägg till den här koden i klassen 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

    Om du använder C# kontrollerar du att den NodeMouseClick händelsen är associerad med dess händelsehanteringsmetod. Lägg till den här koden i formulärkonstruktorn.

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

Testa programmet

Nu kan du testa formuläret för att se till att det fungerar som förväntat.

Testa formuläret

  • Tryck på F5 för att köra programmet.

    Du ser ett delat formulär som innehåller en TreeView kontroll som visar projektkatalogen till vänster och en ListView kontroll till höger med tre kolumner. Du kan bläddra i TreeView genom att välja katalognoder och ListView fylls i med innehållet i den valda katalogen.

Nästa steg

Det här programmet ger dig ett exempel på hur du kan använda TreeView och ListView kontroller tillsammans. Mer information om dessa kontroller finns i följande avsnitt:

Se även