Sdílet prostřednictvím

Návod: Vytváření rozhraní ve stylu Průzkumníku s ovládacími prvky ListView a TreeView pomocí Návrháře

  • Článek

Jednou z výhod sady Visual Studio je možnost vytvářet profesionálně vypadající model Windows Forms aplikace za krátkou dobu. Běžným scénářem je vytvoření uživatelského rozhraní s ovládacími ListView prvky a TreeView ovládacími prvky, které se podobají funkci Průzkumníka Windows operačních systémů Windows. Průzkumník Windows zobrazuje hierarchickou strukturu souborů a složek na počítači uživatele.

Vytvoření formuláře obsahujícího ovládací prvek ListView a TreeView

  1. V nabídce Soubor přejděte na příkaz Nový a klepněte na tlačítko Projekt.

  2. V dialogovém okně New Project (Nový projekt) proveďte následující kroky:

    1. V kategoriích zvolte Jazyk Visual Basic nebo Visual C#.

    2. V seznamu šablon zvolte model Windows Forms Aplikace.

  3. Klikněte na OK. Vytvoří se nový projekt model Windows Forms.

  4. SplitContainer Přidejte ovládací prvek do formuláře a nastavte jeho Dock vlastnost na Fill.

  5. ImageList Přidejte název imageList1 do formuláře a pomocí okno Vlastnosti přidejte dva obrázky: obrázek složky a obrázek dokumentu v daném pořadí.

  6. TreeView Přidejte ovládací prvek s názvem treeview1 do formuláře a umístěte ho na levou stranu SplitContainer ovládacího prvku. V okno Vlastnosti postupujte treeView1 takto:

    1. Nastavte vlastnost Dock na Fill.

    2. Nastavení vlastnosti na ImageListimagelist1.

  7. Přidejte ovládací prvek pojmenovaný ListViewlistView1 do formuláře a umístěte ho na pravou stranu SplitContainer ovládacího prvku. V okno Vlastnosti postupujte listview1 takto:

    1. Nastavte vlastnost Dock na Fill.

    2. Nastavte vlastnost View na Details.

    3. Otevřete Editor kolekce ColumnHeader kliknutím na tři tečky (The Ellipsis button (...) in the Properties window of Visual Studio.) ve Columns vlastnosti**.** Přidejte tři sloupce a nastavte jejich Text vlastnost na Name, Typea Last Modifiedv uvedeném pořadí. Kliknutím na OK zavřete dialogové okno.

    4. Nastavení vlastnosti na SmallImageListimageList1.

  8. Implementujte kód, který naplní TreeView uzly a pod uzly. Přidejte tento kód do Form1 třídy.

    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. Vzhledem k tomu, že předchozí kód používá obor názvů System.IO, přidejte odpovídající příkaz using nebo import v horní části formuláře.

    using System.IO;

    Imports System.IO

  10. Volání metody nastavení z předchozího kroku v konstruktoru formuláře nebo Load metodě zpracování událostí. Přidejte tento kód do konstruktoru formuláře.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. NodeMouseClick Zpracujte událost protreeview1a implementujte kód, který se má naplnit listview1 obsahem uzlu při kliknutí na uzel. Přidejte tento kód do Form1 třídy.

    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

    Pokud používáte jazyk C#, ujistěte se, že máte událost přidruženou NodeMouseClick k metodě zpracování událostí. Přidejte tento kód do konstruktoru formuláře.

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

Testování aplikace

Formulář teď můžete otestovat a ujistit se, že se chová podle očekávání.

Otestování formuláře

  • Stisknutím klávesy F5 spusťte aplikaci.

    Zobrazí se rozdělený formulář obsahující TreeView ovládací prvek, který zobrazuje adresář projektu na levé straně, a ListView ovládací prvek na pravé straně se třemi sloupci. Můžete procházet TreeView výběrem uzlů adresáře a ListView naplní se obsahem vybraného adresáře.

Další kroky

Tato aplikace poskytuje příklad toho, jak můžete společně používat TreeView a ListView ovládat ovládací prvky. Další informace o těchto ovládacích prvcích najdete v následujících tématech:

Viz také