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

Artikel
08/20/2007

Einer der Vorteile von Visual Studio 2005 ist die Möglichkeit, in kurzer Zeit professionell aussehende Windows Forms-Anwendungen zu erstellen. Ein häufiges Szenario ist die Erstellung einer Benutzeroberfläche (UI) mit dem ListView-Steuerelement und dem TreeView-Steuerelement, die vergleichbar ist mit dem Windows Explorer-Feature von Windows-Betriebssystemen. Windows Explorer zeigt auf dem Computer eines Benutzers eine hierarchische Struktur der Dateien und Ordner an.

Hinweis

Je nach den aktiven Einstellungen oder der verwendeten Version können die angezeigten Dialogfelder und Menübefehle von den in der Hilfe beschriebenen abweichen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

So erstellen Sie das Formular, das ein ListView-Steuerelement und ein TreeView-Steuerelement enthält

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 im Bereich Projekttypen entweder die Option Visual Basic-Projekte oder Visual C#-Projekte aus.
2. Wählen Sie im Bereich Vorlagen die Option Windows-Anwendung aus.
Klicken Sie auf OK. Ein neues Windows Forms-Projekt wird erstellt.
Fügen Sie dem Formular ein SplitContainer-Steuerelement hinzu, und legen Sie seine Dock-Eigenschaft auf Fill fest.
Fügen Sie dem Formular eine ImageList mit dem Namen imageList1 hinzu, und fügen Sie mit dem Eigenschaftenbrowser zwei Bilder in folgender Reihenfolge hinzu: ein Ordner- und ein Dokumentbild.
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 Eigenschaftenbrowser 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 Eigenschaftenbrowser 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-Auflistungs-Editor, indem Sie auf die Auslassungszeichen () in der Columns-Eigenschaft klicken. Fügen Sie drei Spalten hinzu, und legen Sie ihre 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.

Implementieren Sie den Code, um die TreeView mit Knoten und untergeordneten Knoten zu füllen. Im Beispielcode wird aus dem Dateisystem gelesen und vorausgesetzt, dass im Anwendungsverzeichnis die beiden Symbole folder.ico und doc.ico vorhanden sind, die zuvor der imageList1 hinzugefügt wurden.

Private Sub PopulateTreeView() 
    Dim rootNode As TreeNode

    Dim info As New DirectoryInfo("C:\Documents and Settings")
    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

private void PopulateTreeView()
{
    TreeNode rootNode;

    DirectoryInfo info = new DirectoryInfo(@"C:\Documents and Settings");
    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);
    }
}

Da vom vorherigen Code der Namespace System.IO verwendet wird, muss die entsprechende using- oder import-Anweisung an den Anfang des Formulars eingefügt werden.
```
Imports System.IO
```
```
using System.IO;
```

Rufen Sie die Einrichtungsmethode aus dem vorherigen Schritt im Konstruktor oder in der Load-Ereignisbehandlungsmethode des Formulars auf.

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

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

Behandeln Sie das NodeMouseClick-Ereignis für treeview1, und implementieren Sie den Code, um listview1 mit dem Inhalt eines Knotens zu füllen, sobald auf einen Knoten geklickt wird.

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

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);
}

Stellen Sie beim Verwenden von C# sicher, dass Sie das NodeMouseClick-Ereignis mit der entsprechenden Ereignisbehandlungsmethode verknüpft haben.

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

Drucken Sie F5, um die Anwendung auszuführen.

Sie erhalten ein getrenntes Formular mit einem TreeView-Steuerelement, das ein Verzeichnis mit dem Namen c:\Documents and Settings auf der linken Seite und ein ListView-Steuerelement auf der rechten Seite sowie drei Spalten anzeigt. Sie können durch die TreeView navigieren, indem Sie Verzeichnisknoten auswählen. Dabei wird die ListView mit dem Inhalt des ausgewählten Verzeichnisses gefüllt.

Nächste Schritte

Diese Anwendung ist ein Beispiel dafür, wie Sie das TreeView-Steuerelement und das ListView-Steuerelement zusammen verwenden können. Weitere Informationen über diese Steuerelemente finden Sie unter den folgenden Themen:

Siehe auch

Freigeben über

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

So erstellen Sie das Formular, das ein ListView-Steuerelement und ein TreeView-Steuerelement enthält

Testen der Anwendung

So testen Sie das Formular

Nächste Schritte

Siehe auch

Aufgaben

Referenz

Weitere Ressourcen

Zusätzliche Ressourcen