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

Article
08/10/2011

L'un des avantages de Visual Studio est la capacité de créer des applications Windows Forms de qualité professionnelle en un court laps de temps. Un scénario courant consiste à créer, avec les contrôles ListView et TreeView, une interface utilisateur qui ressemble à 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 de l'utilisateur.

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

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

Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Dans la boîte de dialogue Nouveau projet, effectuez les opérations suivantes :
1. Dans les catégories, sélectionnez Visual Basic ou Visual C#.
2. Dans la liste des modèles, sélectionnez Windows Forms Application.
Cliquez sur OK. Un nouveau projet Windows Forms est créé.
Ajoutez un SplitContainer au formulaire, et remplacez sa propriété Dock par Fill.
Ajoutez au formulaire un ImageList nommé imageList1 et utilisez la fenêtre Propriétés pour ajouter deux images : une image de dossier et une image de document, respectivement.
Ajoutez au formulaire un contrôle TreeView nommé treeview1, puis positionnez-le sur le côté gauche du contrôle SplitContainer. Dans la fenêtre Propriétés de treeView1, définissez les propriétés suivantes :
1. Affectez à la propriété Dock la valeur Fill.
2. Affectez à la propriété ImageList la valeur imagelist1.
Ajoutez au formulaire un contrôle ListView nommé listView1, puis positionnez-le sur le côté droit du contrôle SplitContainer. Dans la fenêtre Propriétés de listview1, définissez les propriétés suivantes :
1. Affectez à la propriété Dock la valeur Fill.
2. Affectez à la propriété View la valeur Details.
3. Ouvrez l'Éditeur de la collection ColumnHeader cliquant sur le bouton de sélection () dans la propriété Columns . Ajoutez trois colonnes et attribuez à leur propriété Text les valeurs Name, Type et 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 le TreeView avec les nœuds et les sous-nœuds. Ajoutez ce code à la classe Form1.

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

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

Dans la mesure où le code précédent utilise l'espace de noms System.IO, ajoutez l'instruction using ou import appropriée en haut du formulaire.
```
Imports System.IO
```
```
using System.IO;
```

Appelez la méthode de paramétrage de l'étape précédente dans le constructeur du formulaire ou la méthode de gestion d'événements Load. Ajoutez ce code au constructeur de formulaire.

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

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

Gérez l'événement NodeMouseClick pour treeview1**,** et implémentez le code pour remplir listview1 avec le contenu d'un nœud lorsque l'utilisateur clique sur un nœud. Ajoutez ce code à la classe Form1.

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

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

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

Test de l'application

Vous pouvez à présent tester le formulaire afin de 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é qui contient un contrôle TreeView qui affiche un répertoire étiqueté 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 ; le contenu du répertoire sélectionné remplit ListView.

Étapes suivantes

Cette application vous donne un exemple de la façon dont vous pouvez utiliser ensemble les contrôles TreeView et ListView. Pour plus d'informations sur ces contrôles, consultez les rubriques suivantes :

Voir aussi

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 qui contient un contrôle TreeView et ListView

Test de l'application

Pour tester le formulaire

Étapes suivantes

Voir aussi

Tâches

Référence

Autres ressources

Ressources supplémentaires