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/21/2007

L'un des avantages de Visual Studio 2005 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

Selon vos paramètres actifs ou votre édition, les boîtes de dialogue et les commandes de menu que vous voyez peuvent différer de celles qui sont décrites dans l'aide. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

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

Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Fichier.
Dans la boîte de dialogue Nouveau projet, effectuez les opérations suivantes :
1. Dans le volet Types de projets, choisissez Projets Visual Basic ou Projets Visual C#.
2. Dans le volet Modèles, sélectionnez Application Windows.
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 a nommé imageList1 et utilisez l'Explorateur de propriétés pour ajouter deux images : un dossier et une image de document, dans cet ordre.
Ajoutez au formulaire un contrôle TreeView nommé treeview1, puis positionnez-le sur le côté gauche du contrôle SplitContainer. Dans l'Explorateur de propriétés pour treeView1, effectuez les opérations 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 l'Explorateur de propriétés pour listview1, effectuez les opérations 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. L'exemple de code effectue une lecture du système de fichiers et requiert l'existence de deux icônes, folder.ico et doc.ico qui ont été précédemment ajoutées à imageList1.

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

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.

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 lors d'un clic sur un nœud.

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.

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é c:\Documents and Settings 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 ListView est rempli avec le contenu du répertoire sélectionné.

É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

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