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

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 des contrôles ListView et TreeView 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 des contrôles ListView et TreeView

1. Dans le menu Fichier , pointez sur Nouveau, puis cliquez sur Projet.

2. 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 l'application Windows Forms .

3. Cliquez sur OK. Un nouveau projet Windows Forms est créé.

4. Ajoutez un contrôle SplitContainer au formulaire et définissez sa propriété Dock sur Fill.

5. Ajoutez une ImageList nommée imageList1 au formulaire et utilisez la fenêtre Propriétés pour ajouter deux images : une image de dossier et une image de document, dans cet ordre.

6. Ajoutez un contrôle TreeView nommé treeview1 au formulaire et placez-le sur le côté gauche du contrôle SplitContainer. Dans la fenêtre Propriétés de treeView1 procédez comme suit :

   1. Attribuez à la propriété Dock la valeur Fill.

   2. Définissez la propriété ImageList sur imagelist1.

7. Ajoutez un contrôle ListView nommé listView1 au formulaire et positionnez-le sur le côté droit du contrôle SplitContainer. Dans la fenêtre Propriétés de listview1 procédez comme suit :

   1. Attribuez à la propriété Dock la valeur Fill.

   2. Attribuez à la propriété View la valeur Details.

   3. Ouvrez l’Éditeur de collection ColumnHeader en cliquant sur les points de suspension () dans la propriété Columns*.** Ajoutez trois colonnes et définissez leur propriété Text sur Name, Typeet Last Modified, respectivement. Cliquez sur OK pour fermer la boîte de dialogue.

   4. Définissez la propriété SmallImageList sur imageList1.

8. Implémentez le code pour remplir le TreeView avec des nœuds et des sous-nœuds. Ajoutez ce code à la classe 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. Étant donné que le code précédent utilise l’espace de noms System.IO, ajoutez l’instruction using ou import appropriée en haut du formulaire.

   using System.IO;
   

   Imports System.IO
   

10. Appelez la méthode de mise en place de l’étape précédente dans le constructeur du formulaire ou dans la méthode de gestion des événements Load. Ajoutez ce code au constructeur de formulaire.

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

    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub
    
    

11. Gérez l’événement NodeMouseClick pour treeview1, et implémentez le code pour remplir listview1 avec le contenu d’un nœud lorsqu’un nœud est cliqué. Ajoutez ce code à la classe 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
    
    

    Si vous utilisez C#, vérifiez que vous disposez de l’événement NodeMouseClick 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 contrôle TreeView qui affiche votre répertoire de projet sur le côté gauche et un contrôle ListView sur le côté droit avec trois colonnes. Vous pouvez parcourir le TreeView en sélectionnant des nœuds de répertoire, et le ListView est rempli avec le contenu du répertoire sélectionné.

Étapes suivantes

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

• Comment : ajouter des informations personnalisées à un contrôle TreeView ou ListView (Windows Forms)

• Comment : ajouter des fonctionnalités de recherche à un contrôle ListView

• Comment : attacher un menu ShortCut à un nœud TreeView

Voir aussi

• ListView
• TreeView
• Contrôle ListView
• Comment : ajouter et supprimer des nœuds avec le contrôle TreeView Windows Forms
• Comment : ajouter et supprimer des éléments avec le contrôle ListView Windows Forms
• Comment : ajouter des colonnes au contrôle ListView Windows Forms