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

  • Artikel

Einer der Vorteile von Visual Studio ist die Möglichkeit, professionelle Windows Forms-Anwendungen in kurzer Zeit zu erstellen. Ein häufiges Szenario besteht darin, eine Benutzeroberfläche (UI) mit ListView- und TreeView-Steuerelementen zu erstellen, die dem von Windows-Betriebssystemen bekannten Windows-Explorer ähneln. Windows-Explorer zeigt eine hierarchische Struktur der Dateien und Ordner auf dem Computer der Benutzer*innen an.

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

  1. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

  2. Führen Sie im Dialogfeld Neues Projekt folgende Schritte aus:

    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-Anwendung aus.

  3. Klicken Sie auf OK. Ein neues Windows Forms-Projekt wird erstellt.

  4. Fügen Sie dem Formular ein SplitContainer-Steuerelement hinzu, und legen Sie dessen Dock-Eigenschaft auf Fill fest.

  5. 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).

  6. Fügen Sie dem Formular ein TreeView-Steuerelement namens treeview1 hinzu, und positionieren Sie es links vom SplitContainer-Steuerelement. Führen Sie im Eigenschaftenfenster zu treeView1 folgende Schritte aus:

    1. Setzen Sie die Dock-Eigenschaft auf Fill.

    2. Legen Sie die ImageList-Eigenschaft auf imagelist1. fest.

  7. Fügen Sie dem Formular ein ListView-Steuerelement namens listView1 hinzu, und positionieren Sie es rechts vom SplitContainer-Steuerelement. Führen Sie im Eigenschaftenfenster zu listview1 folgende Schritte aus:

    1. Setzen Sie die Dock-Eigenschaft auf Fill.

    2. Setzen Sie die View-Eigenschaft auf Details.

    3. Öffnen Sie den ColumnHeader-Auflistungs-Editor, indem Sie auf die Schaltfläche mit den Auslassungspunkten (Schaltfläche mit Auslassungspunkten (...) im Eigenschaftenfenster von Visual Studio) in der Columns-Eigenschaft klicken. Fügen Sie drei Spalten hinzu, und legen Sie deren Text-Eigenschaft auf Name, Type bzw. Last Modified fest. Klicken Sie auf OK , um das Dialogfeld zu schließen.

    4. Legen Sie die SmallImageList-Eigenschaft auf imageList1. fest.

  8. 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

  9. 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

  10. Rufen Sie die Setupmethode aus dem vorherigen Schritt im Konstruktor oder in der Load-Ereignisbehandlungsmethode des Formulars auf. Fügen Sie diesen Code Formularkonstruktor hinzu.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. 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 der Ereignisbehandlungsmethode zugeordnet ist. Fügen Sie diesen Code Formularkonstruktor hinzu.

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

Testen der Anwendung

Sie können das Formular jetzt testen, um sicherzustellen, dass das Verhalten wie erwartet ausfällt.

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 die gemeinsame Verwendung der Steuerelemente TreeView und ListView. Weitere Informationen zu diesen Steuerelementen finden Sie unter den folgenden Themen:

Weitere Informationen