Procédure pas à pas : création d’une interface de style Explorateur avec les contrôles ListView et TreeView à l’aide du concepteur

Article
10/18/2023

L’un des avantages de Visual Studio est la possibilité de créer des applications Windows Forms professionnelles dans un court laps de temps. Un scénario courant consiste à créer une interface utilisateur avec et TreeView des ListView contrôles qui ressemblent à la fonctionnalité Explorateur Windows des systèmes d’exploitation Windows. L’Explorateur Windows affiche une structure hiérarchique des fichiers et dossiers sur l’ordinateur d’un utilisateur.

Pour créer le formulaire contenant un contrôle ListView et TreeView

Dans le menu Fichier , pointez sur Nouveau, puis cliquez sur Projet.
Dans la boîte de dialogue Nouveau projet , procédez comme suit :
1. Dans les catégories, choisissez Visual Basic ou Visual C#.
2. Dans la liste des modèles, choisissez Application Windows Forms.
Cliquez sur OK. Un nouveau projet Windows Forms est créé.
Ajoutez un SplitContainer contrôle au formulaire et définissez sa Dock propriété sur Fill.
Ajoutez un ImageList nom imageList1 au formulaire et utilisez le Fenêtre Propriétés pour ajouter deux images : une image de dossier et une image de document, dans cet ordre.
Ajoutez un TreeView contrôle nommé treeview1 au formulaire et positionnez-le sur le côté gauche du SplitContainer contrôle. Dans le Fenêtre Propriétés pour treeView1 effectuer les opérations suivantes :
1. Définissez la propriété Dock sur Fill.
2. Affectez à la propriété ImageList la valeur imagelist1.
Ajoutez un ListView contrôle nommé listView1 au formulaire et positionnez-le sur le côté droit du SplitContainer contrôle. Dans le Fenêtre Propriétés pour listview1 effectuer les opérations suivantes :
1. Définissez la propriété Dock sur Fill.
2. Définissez la propriété View sur Details.
3. Ouvrez l’Éditeur de collection ColumnHeader en cliquant sur les points de suspension () dans la Columns propriété**.** Ajoutez trois colonnes et définissez leur Text propriété Namesur , Typeet Last Modified, respectivement. Cliquez sur OK pour fermer la boîte de dialogue.
4. Affectez à la propriété SmallImageList la valeur imageList1.

Implémentez le code pour remplir les TreeView nœuds et les sous-nœuds. Ajoutez ce code à la Form1 classe.

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

Étant donné que le code précédent utilise l’espace de noms System.IO, ajoutez l’instruction appropriée à l’aide ou à l’importation en haut du formulaire.
```
using System.IO;
```
```
Imports System.IO
```
Appelez la méthode de configuration à partir de l’étape précédente dans le constructeur du formulaire ou Load la méthode de gestion des événements. Ajoutez ce code au constructeur de formulaire.
```
public Form1()
{
    InitializeComponent();
    PopulateTreeView();
}
```
```
Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub
```

Gérez l’événement NodeMouseClick pour treeview1, puis implémentez le code pour remplir listview1 le contenu d’un nœud lorsqu’un nœud est cliqué. Ajoutez ce code à la Form1 classe.

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

Si vous utilisez C#, vérifiez que l’événement NodeMouseClick est associé à sa méthode de gestion des événements. Ajoutez ce code au constructeur de formulaire.

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

Test de l’application

Vous pouvez maintenant tester le formulaire pour vous assurer qu’il se comporte comme prévu.

Pour tester le formulaire

Appuyez sur F5 pour exécuter l'application.

Vous verrez un formulaire fractionné contenant un TreeView contrôle qui affiche le répertoire de votre projet sur le côté gauche et un ListView contrôle sur le côté droit avec trois colonnes. Vous pouvez parcourir le TreeView répertoire en sélectionnant des nœuds de répertoire, et le ListView contenu du répertoire sélectionné est renseigné.

Étapes suivantes

Cette application vous donne un exemple de moyen d’utiliser TreeView et ListView de contrôler ensemble. Pour plus d’informations sur ces contrôles, consultez les rubriques suivantes :

Partager via

Procédure pas à pas : création d’une interface de style Explorateur avec les contrôles ListView et TreeView à l’aide du concepteur

Pour créer le formulaire contenant un contrôle ListView et TreeView

Test de l’application

Pour tester le formulaire

Étapes suivantes

Voir aussi

Ressources supplémentaires