Exemplarische Vorgehensweise: Erstellen einer Explorer-ähnlichen Schnittstelle mit dem ListView-und dem TreeView-Steuerelement im Designer

Artikel
01/30/2025

Einer der Vorteile von Visual Studio ist die Möglichkeit, professionell aussehende Windows Forms-Anwendungen in kurzer Zeit zu erstellen. Ein gängiges Szenario ist das Erstellen einer Benutzeroberfläche mit ListView und TreeView Steuerelementen, die dem Windows Explorer-Feature von Windows-Betriebssystemen ähneln. Windows Explorer zeigt eine hierarchische Struktur der Dateien und Ordner auf dem Computer eines Benutzers an.

So erstellen Sie das Formular mit einem ListView- und TreeView-Steuerelement

Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.
Gehen Sie im Dialogfeld Neues Projekt wie folgt vor:
1. Wählen Sie in den Kategorien entweder Visual Basic oder Visual C# aus.
2. Wählen Sie in der Liste der Vorlagen Windows Forms Applicationaus.
Klicken Sie auf OK. Es wird ein neues Windows Forms-Projekt erstellt.
Fügen Sie dem Formular ein SplitContainer-Steuerelement hinzu, und legen Sie dessen Dock-Eigenschaft auf Fill fest.
Fügen Sie dem Formular eine ImageList namens imageList1 hinzu, und verwenden Sie das Eigenschaftenfenster, um zwei Bilder hinzuzufügen: ein Ordnerbild und ein Dokumentbild (in dieser Reihenfolge).
Fügen Sie dem Formular ein TreeView Steuerelement mit dem Namen treeview1 hinzu, und positionieren Sie es auf der linken Seite des SplitContainer-Steuerelements. Gehen Sie im Fenster "Eigenschaften" für treeView1 wie folgt vor:
1. Legen Sie die Dock-Eigenschaft auf Fill fest.
2. Legen Sie die ImageList-Eigenschaft auf imagelist1. fest.
Fügen Sie dem Formular ein ListView Steuerelement mit dem Namen listView1 hinzu, und positionieren Sie es auf der rechten Seite des SplitContainer-Steuerelements. Gehen Sie im Fenster "Eigenschaften" für listview1 wie folgt vor:
1. Legen Sie die Dock-Eigenschaft auf Fill fest.
2. Legen Sie die View-Eigenschaft auf Details fest.
3. Öffnen Sie den ColumnHeader-Sammlungs-Editor, indem Sie im Eigenschaftenfenster von Visual Studio in der Columns-Eigenschaft auf die Auslassungspunkte () klicken**.** Fügen Sie drei Spalten hinzu, und legen Sie deren Text-Eigenschaft jeweils auf Name, Type und Last Modified fest. Klicken Sie auf OK, um das Dialogfeld zu schließen.
4. Legen Sie die SmallImageList-Eigenschaft auf imageList1. fest.

Implementieren Sie den Code, um die TreeView mit Knoten und Unterknoten aufzufüllen. Fügen Sie diesen Code zur Form1 Klasse hinzu.

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

Da der vorherige Code den System.IO-Namespace verwendet, fügen Sie oben im Formular die entsprechende using- oder import-Anweisung hinzu.
```
using System.IO;
```
```
Imports System.IO
```
Rufen Sie die Setupmethode aus dem vorherigen Schritt im Konstruktor oder in der Load-Ereignisbehandlungsmethode des Formulars auf. Fügen Sie diesen Code zum Formularkonstruktor hinzu.
```
public Form1()
{
    InitializeComponent();
    PopulateTreeView();
}
```
```
Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub
```

Behandeln Sie das NodeMouseClick-Ereignis für treeview1, und implementieren Sie den Code, um listview1 mit dem Inhalt eines Knotens aufzufüllen, wenn auf einen Knoten geklickt wird. Fügen Sie diesen Code zur Form1 Klasse hinzu.

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

Wenn Sie C# verwenden, stellen Sie sicher, dass das NodeMouseClick-Ereignis seiner entsprechenden Ereignisbehandlungsmethode zugeordnet ist. Fügen Sie diesen Code zum Formularkonstruktor hinzu.

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

Testen der Anwendung

Sie können das Formular jetzt testen, um sicherzustellen, dass es sich wie erwartet verhält.

So testen Sie das Formular

Drücken Sie F5, um die Anwendung auszuführen.

Es wird ein geteiltes Formular anzeigt, das auf der linken Seite ein TreeView-Steuerelement mit Ihrem Projektverzeichnis enthält und auf der rechten Seite ein ListView-Steuerelement mit drei Spalten. Sie können die TreeView durchlaufen, indem Sie Verzeichnisknoten auswählen. ListView wird dann immer mit dem Inhalt des ausgewählten Verzeichnisses aufgefüllt.

Nächste Schritte

Diese Anwendung bietet Ihnen ein Beispiel für eine Möglichkeit, wie Sie TreeView und ListView Steuerelemente zusammen verwenden können. Weitere Informationen zu diesen Steuerelementen finden Sie in den folgenden Themen:

Freigeben über

Exemplarische Vorgehensweise: Erstellen einer Explorer-ähnlichen Schnittstelle mit dem ListView-und dem TreeView-Steuerelement im Designer

So erstellen Sie das Formular mit einem ListView- und TreeView-Steuerelement

Testen der Anwendung

So testen Sie das Formular

Nächste Schritte

Weitere Informationen

Zusätzliche Ressourcen