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

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

  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 Application Windows Forms.

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

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

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

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

  7. 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 (The Ellipsis button (...) in the Properties window of Visual Studio.) 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.

  8. 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
    
    
  9. É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
    
  10. 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
    
    
  11. 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 :

Voir aussi